question-mark
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 issue

Describe 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 image

Additional context

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
genoxcommented, Apr 26, 2021

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 createEmotionServer has any benefits for Next projects that are SSR and not static/pre-rendered exports.

1reaction
lachlanjccommented, Oct 6, 2022

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!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found