search

insin / gatsby-plugin-dark-mode

A Gatsby plugin which handles some of the details of implementing a dark mode theme
MIT License
69 stars 19 forks source link

Double rendering on Gatsby Cloud #19

Open leokolt opened 2 years ago

leokolt commented 2 years ago

Hi. My website, which is not yet ready to the end, runs on Gatsby Cloud. I had the same problem as many - I had to click on toggler several times to change the color theme immediately after loading the site. I added the code from this commit and the problem disappeared, but another problem appeared - now my site is rendered twice after loading. You can see it here. Is there any way to solve this problem?

Errors in the console are shown in the picture below. The error description is as follows:

Hydration failed because the initial UI does not match what was rendered on the server. & There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

image

fabianjost commented 1 year ago

Did you find a solution to this? I am facing the exact same issue with the same errors in the production build.

fabianjost commented 1 year ago

FYI for everyone comming across this issue: This seems to be related to the ThemeToggler component. I couldn't find out what the exact issue with it is. I fixed it by simply writing this component myself. In case you want to omit using this package after all, keep in mind that you need to set the theme in the gatsby-ssr.js file (e.g. by adding the 'dark' class to the body). Setting it in gatsby-browser.js is already too late and will cause the page to flicker/quickly change theme during initial page load.