Next.js Dev Server Mismatches

[tomhendra]

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

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

[genox]

I currently face an issue that is probably connected to this (using 0.6.5): Warning: Prop 'className' did not match. Server: "css-157h2lc-CardPortfolio" Client: "css-1u28b8h-CardPortfolio" - I noticed that the vanilla SSR implementation in the NextJS example directory contains a lot more specific code for emotion 11 than any theme-ui + NextJS examples I could find. See: https://github.com/vercel/next.js/tree/canary/examples/with-emotion-vanilla

I wonder if there are any changes since 0.3.x that break NextJS/SSR with emotion 11 that we need to consider?

[hasparus]

Good catch @genox. We don't have createEmotionServer in any of our examples.

@lachlanjc Are you familiar with this problem? (You have a bunch of Next projects, right?)

[lachlanjc]

Yup, I sometimes run into this. Never gotten to the bottom of it though.

[deckchairlabs]

Are you using a @theme-ui/preset by any chance?

[genox]

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.

[lachlanjc]

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!