NextJS & SSR Bug: Warning: Prop className did not match. Server: "css-1ignaq9" Client: "css-1xh7umy"

[adventurini]

Describe the bug
Console error on load.

Expected Behavior
No console error on load.

[benregn]

@adventurini I think people will have a hard time helping you out unless you provide some more details about this problem and ideally minimal project reproducing the bug.

One question, are you using the ColorModeProvider? Server-side might be rendering the light theme and when it's rendered and hydrated on the client, it might change to the dark theme which uses different classes.

[feross]

I've also seen this issue when using ColorModeProvider. Removing it fixes the issue.

@benregn What's the right way to handle the case where the server sends a light mode page but the client is in dark mode?

[with-heart]

I haven't had time to go through and give it the read it deserves, but Josh W. Comeau recently took a deep dive on this exact topic: https://joshwcomeau.com/gatsby/dark-mode/

Might be useful information in there. I'll try to go through it later and report back any relevant findings.

[benregn]

Josh's article is great and explains the underlying problems really well. His solution relies on using CSS Custom Properties (Variables) so if you aren't using them or aren't familiar with them, it could take a bit of work to setup. I haven't experimented with his solution yet when using Chakra.

@feross I'm not sure if I can answer what the 'right way' is but the solution Josh presents definitely works and another solution I've seen work is to store the preference in a cookie but that does break static optimization.

[segunadebayo]

Hey guys,

We're fixed the issue with the ColorModeProvider in the next release.

It'll be landing soon!

[feross]

👏 @segunadebayo

[javierfuentesm]

I still have this issue

[turtletongue]

I still have this issue

same

[ADParris]

Just an F.Y.I. that 'useMediaQuery' is still causing this issue. Presumably because Chakra rebuilds the CSS when it hits the front end and thus the two do not match. I did manage to resolve this little conflict rather easily, once I figured it out. I just moved the media queries to my global CSS, in my custom Chakra Theme, and removed any mention of 'useMediaQuery'. Boom! No error and no inconsistencies on re-render. Just thought I'd share for anyone else that happens along here with this little problem. 😉

[niconiahi]

same happening to me when ussing useMediaQuery as so:

const useDevice = () => {
  const [isLargeDevice] = useMediaQuery('(min-width: 62em)')

  return {
    isLargeDevice,
  }
}

then used: (THIS THROWS AN ERROR)

  import { useDevice } from './useDevice'
  
  const { isLargeDevice } = useDevice()
  
   <Text color='white' textStyle={isLargeDevice ? 'body.bold.lg' : 'body.bold.md'}>
       Don't miss out on new proposals
   </Text>

used: (THIS DOESN'T)

   <Text color='white'>
       Don't miss out on new proposals
   </Text>

screenshot here: