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.

React server mismatches: Prop `className` did not match.

See original GitHub issue

Bug report

Describe the bug

After upgrading from Next.js 9.0.5 to 9.2.2 we noticed that we are getting server mismatches for a lot of our components which never errored before. We also tried other versions (e.g. 9.1.x, 9.2.x, 9.3.x) and all of them have the same problem.

To Reproduce

Please use this repository with easy reproducible error - https://github.com/voronianski/nextjs-server-mismatch-bug

The code of the example component is open-source UI library and you can find it here - https://github.com/sumup-oss/circuit-ui/blob/canary/src/components/Hamburger/Hamburger.js

Screenshots

Issue Analytics

State:
Created 3 years ago
Reactions:14
Comments:57 (8 by maintainers)

Top GitHub Comments

60reactions

Timercommented, Nov 7, 2020

Closing as it’s a bug in your application and can be better solved in Discussions or on Discord!

34reactions

gabsncommented, Oct 29, 2020

I can confirm that with next 10 😢

Top Results From Across the Web

Warning: Prop `className` did not match. when using styled ...

That error is showing you the class that is being created by your styled-components library on the server and how it is different...

Warning: Prop className did not match. #7322 - GitHub

It appears to be an issue that backend generates styled component but client doesn't get it/doesn't use it and instead of using server...

Fixing ClassName did not match error - DEV Community ‍ ‍

babelrc in the root directory and configure it. Here's the config file. Restart your server and refresh your server and you should be...

Warning: Prop `className` did not match in Next.JS site with ...

Try installing babel-plugin-styled-components , then add a .babelrc file to the root of the project with the following configuration.

Our journey to make styled-components work with server-side ...

Warning: Prop `className` did not match. ... styled-components documentation mentions that there could be class name mismatches between client and server, ...