Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Next.js Dev Server Mismatches
See original GitHub issueDescribe the bug
NextJS throws a warning that the children of any component which consumes useColorMode do not match that of the server. This is when running the dev server in all alpha versions later than v0.5.0-alpha.2.
To Reproduce See https://github.com/tomhendra/theme-ui-example for a minimal reproduction of the issue.
Expected behavior
No error as with v0.5.0-alpha.2.
Screenshots
Additional context
- I have tested all versions of 0.6.0 and the issue persists.
- Verified in Chrome, Firefox & Safari.
- The issue only exists in dev. See live deployment: https://theme-ui-example-h1zljqzqi-tomhendra.vercel.app
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:6 (4 by maintainers)
Top Results From Across the Web
react-hydration-error - Next.js
When css-in-js libraries are not set up for pre-rendering (SSR/SSG) it will often lead to a hydration mismatch. In general this means the...
Read more >SSR mismatch adventures in Next.js | by Mark Miro - Medium
SSR mismatch adventures in Next.js. I went back to update my personal site, and it was quite an adventure digging into some of...
Read more >NextJS: server-side and client-side mismatch - Colin's Thoughts
Learn how to solve a mismatch between the server-side and client-side in NextJS.
Read more >Nextjs Hydration Failed Mismatched Time between Client and ...
Error: Hydration failed because the initial UI does not match what was rendered on the server. Error: There was an error while hydrating....
Read more >Handling the React server hydration mismatch error
NOTE: Apps using a CSS-in-JS library (such as emotion) also run into this warning with mismatched className props. But the issue isn't that...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Just as a FYI - the issue disappeared for me as sudden as it appeared. Probably a result of the dependency cocktail 😃 I honestly have no visibility on this one…
I wonder though wether
createEmotionServerhas any benefits for Next projects that are SSR and not static/pre-rendered exports.I’m going to close this for now; I think the majority of instances of this issue were caused by multiple versions of Emotion being installed, a problem we’ve stopped contributing to via making Emotion a peer dependency. I’ve also found Next.js Emotion compiler support to improve this. Please let us know if you’re still running into issues!