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

[voronianski]

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

[seanblonien]

Im using nextjs + material-ui. Not using typescript but my _document.js and _app.js are similar if not the same. The issue still occurs, but what worked for me was changing the import of the component causing the issue.

From: import { Box } from '@material-ui/core';

To: import Box from '@material-ui/core/Box';

Thank you @DevDaveJ! This fixed it for me. Do you know why this fixes it by chance? Do all MaterialUI imports have to be like this/why can't we import from '@material-ui/core` directly?

[DevDaveJ]

Im using nextjs + material-ui. Not using typescript but my _document.js and _app.js are similar if not the same. The issue still occurs, but what worked for me was changing the import of the component causing the issue. From: import { Box } from '@material-ui/core'; To: import Box from '@material-ui/core/Box';

Thank you @DevDaveJ! This fixed it for me. Do you know why this fixes it by chance? Do all MaterialUI imports have to be like this/why can't we import from '@material-ui/core` directly?

Great! I don't know why the imports are different - they shouldn't be - but I would like to find out as well!

[jamesbluecrow]

In case this helps, vercel has an example of wha the .babelrc file needs to look like for this error not to happen.

https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/.babelrc

[handycode]

I've ended up here for 3 different projects the past couple of months. This is what has silenced the error all 3 times:

1. Create the .babelrc file in your root folder
2. Add this: { "presets": [ "next/babel" ], "plugins": [ [ "styled-components", { "ssr": true } ] ] }

(hello to future me for the 4th project)

That's works for me. Thanks!

[giovannicanzio]

.babelrc worked for me too! Thanks!

[htgmanics]

I've ended up here for 3 different projects the past couple of months. This is what has silenced the error all 3 times:

1. Create the .babelrc file in your root folder
2. Add this: { "presets": [ "next/babel" ], "plugins": [ [ "styled-components", { "ssr": true } ] ] }

(hello to future me for the 4th project)

This works for me, Million Thanks!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.