-
-
Notifications
You must be signed in to change notification settings - Fork 272
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fails to render on first render (silently) #538
Comments
I'm also experiencing this issue with
|
Looks like this is a duplicate of #513 |
This seems to be still ongoing and occurs only when using Prism.
|
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. |
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. |
This is a real bummer. Such a nice library and then it doesn't work on prod... Any recommendations for an alternative? |
I got some good news: |
I tried that, it doesn't work for me. Do you run a production build with SSR and |
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?
|
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:
Maybe someone figured out how to make this work with the fork mentioned above |
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: ***@***.***>
|
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 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 You can try opening https://reactserver.dev/button to see if the issue happens to you. It's a CSR production build. |
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):
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
The text was updated successfully, but these errors were encountered: