Fails to render on first render (silently)

[lanwin]

Describe the bug
On two projects we have the problem that react-syntax-highlighter fails on first render (often, but not always). But only in production builds. Instead of the source code we see only "[object Object],[object Object],[object Object],[object Object]". After triggering a rerender in example by switching the route, the source appears.

To Reproduce
Not yet sure. Nee help to naarow down the cause of this.

Expected behavior
Should show source, even on the first render.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser Firefox 117.0.1

Additional context
We use Vite as bundler and are still on React 17.

There is NO JS error visible on console and also no blocked resource.

Example code - how we use it

import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';

SyntaxHighlighter.registerLanguage('jsx', jsx);
SyntaxHighlighter.registerLanguage('typescript', typescript);

export function MyComponent(props:{code: string}){
  return <SyntaxHighlighter language="jsx">{decodeURIComponent(code)}</SyntaxHighlighter>
}

[itssimon]

I'm also experiencing this issue with PrismAsyncLight.

• Vite as bundler
• React 18
• Chrome and Safari on macOS

[itssimon]

Looks like this is a duplicate of #513

[alexanderhupfer]

This seems to be still ongoing and occurs only when using Prism.
I think it's some kind of race condition. Here is a workaround that fixes it for me:

const CodeBlock = ({ language, part }) => {
  const [code, setCode] = useState('');

  useEffect(() => {
    setCode(part);
  }, [part]);

  return (
    <SyntaxHighlighter language={language} style={vscDarkPlus}>
      {code}
    </SyntaxHighlighter>
  );
};

[C5H8NNaO4]

This is still an issue and very unfortunate when combined with SSR as it causes a CLS when the content flickers... the only solution so far is to render everything in a Light component without colors. Everything else either renders [object Object] or has no colors. Please fix this somehow, as is you can't deploy SSR apps to production.

[alexanderhupfer]

For what it's worth I now tried other solutions with Prism to the same result. Therefore I think it's not a problem of react-syntax-highlighter rather the Prism. Prism is not going to fix this since they focus on version 2 with unknown ETA. So the only solution is to use a non-Prism renderer at this point.

[C5H8NNaO4]

This is a real bummer. Such a nice library and then it doesn't work on prod... Any recommendations for an alternative?

[alexanderhupfer]

I got some good news:
npm install @fengkx/react-syntax-highlighter@15.6.1 actually works (like mentioned in the linked issue).
Also the repository of fengkx seems to be more active (last commit 10 month ago). Thanks @fengkx !

[C5H8NNaO4]

I tried that, it doesn't work for me. Do you run a production build with SSR and hydrateRoot?

[alexanderhupfer]

No, but I had the same issue using vite whenever code got populated on first page view as opposed to being generated later

…

On 7. Mar 2024 at 13:15 +0100, react-syntax-highlighter/react-syntax-highlighter ***@***.***>, wrote: I tried that, it doesn't work for me. Do you run a production build with SSR and hydrateRoot?

[C5H8NNaO4]

It seems like it's a problem with hydration maybe because of partial hydration, I can't observe the issue on CSR production build of Vite or it happens too fast to debug. Seems it's a combination of SSR + Vite + Production.

Seems like I can't roll out SSR for Vite in our Framework if there are so many issues. I basically have these options:

1. Don't highlight code
2. Don't use SSR
3. Have a huge layout shift when delaying rendering on the client side after SSR.

Maybe someone figured out how to make this work with the fork mentioned above

[alexanderhupfer]

you are right, now that I deployed this into production I have the error as well, not even using SSR. Maybe I will have shift away from using Vite for this project, since I have tried multiple highlighters, each with their own problems. Edit: I have now switched to CRA in production an the issues seems to be resolved. Afterwards I found out that it is possible to switch out the vite bundler to webpack. Maybe it's worth trying since this seems like the main differnce between CRA and Vite

…

On 7. Mar 2024 at 13:47 +0100, Moritz Roessler ***@***.***>, wrote: It seems like it's a problem with hydration maybe because of partial hydration, I can't observe the issue on CSR production build of Vite or it happens too fast to debug. Seems it's a combination of SSR + Vite + Production. Seems like I can't roll out SSR for Vite in our Framework if there are so many issues. I basically have these options: 1. Don't highlight code 2. Don't use SSR 3. Have a huge layout shift when delaying rendering with SSR. Maybe someone figured out how to make this work with the fork mentioned above — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[C5H8NNaO4]

I don't want to switch back to webpack. It takes so much longer to build. I'm really glad to have vite as bundler where production deploys take between 30s - 3min. It also doesn't happen to me with a CSR production build which uses createRoot instead of hydrateRoot. If you don't need SSR it should work fine with CSR and Vite. I'll stay away from SSR for now because renderToPipeableStream isn't really supported by Vite / Apollo / react-router and apparently this library.

Note that the server rendered highlight works just fine. So it's a client side issue. Since a pure client side render works for me, I suspected (partial) hydration to be the culprit, but you have the same problem using createRoot, so I'm not sure what's causing the issue in your case. It works fine for me with Vite, CSR and React 18.

You can try opening https://reactserver.dev/button to see if the issue happens to you. It's a CSR production build.