Prop className did not match error after upgrading to React 18

[depiction]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:45:05 PDT 2022; root:xnu-8020.101.4~15/RELEASE_X86_64
Binaries:
  Node: 14.17.3
  npm: 6.14.13
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 12.1.6-canary.4
  react: 18.0.0
  react-dom: 18.0.0

I don't have a .babelrc file.

Exports from next.config.js

module.exports = {
  poweredByHeader: false,
  swcMinify: true
};

Excerpt from _document.tsx

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />)
    });

  const initialProps = await Document.getInitialProps(ctx);

return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()]
  };
};

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

No response

Describe the Bug

After upgrading from React 17 to React 18, I now get the following warning:

After running next dev the app will load with all styles and no warning. However, as soon as I navigate to a different page or refresh, the warning appears and many styles are missing.

I tried all of the following solutions, but they didn't work for me.
- https://binyamin.medium.com/solving-the-styled-components-warning-in-next-js-with-babel-83080e45a0ff
- https://github.com/vercel/next.js/pull/8791/files
- #11600 (comment)
- #11600 (comment)
- #7322 (comment)
- #7322 (comment)
- https://github.com/nblthree/nextjs-with-material-ui-and-styled-components/blob/master/.babelrc
- https://stackoverflow.com/a/69169144/3474412

I confirmed the issue with both next v12.1.5 and v12.1.6-canary.4

Expected Behavior

No warnings appear and all components are properly styled.

To Reproduce

1. Download repo at https://github.com/depiction/nextjs-mui4-with-typescript
2. Run yarn install
3. Run yarn start
4. In the browser with the app running, open the console and view the class name warning.

[depiction]

I replaced the steps to reproduce with a link to a repo that will make reproducing the issue easy.

[juniorbotelho]

You are trying to use an old version of the MUI, try using this:
https://mui.com/material-ui/getting-started/installation/
https://github.com/mui/material-ui/tree/HEAD/examples/nextjs-with-typescript

[depiction]

You are trying to use an old version of the MUI, try using this:
https://mui.com/material-ui/getting-started/installation/
https://github.com/mui/material-ui/tree/HEAD/examples/nextjs-with-typescript

That is what I used to start with, but I downgraded to MUI v4 to match what we are using. The issue doesn’t exist in v5 because v5 no longer uses JSS for styling. Upgrading to v5 isn’t an option for us because of the amount of work it would take to convert all styling from JSS to emotion.

[juniorbotelho]

Try to use this:
https://v4.mui.com/guides/server-rendering/
https://github.com/mui/material-ui/tree/v4.x/examples/nextjs

[depiction]

Try to use this: https://v4.mui.com/guides/server-rendering/ https://github.com/mui/material-ui/tree/v4.x/examples/nextjs

I just did that and got the same result: Prop className did not match. I'd share it, but the code is nearly identical to the repo that I linked in the description.

[spetrey]

I'm able to reproduce this with a similar setup but with styled-components@5.3.3.

[seanpaulharsevoort]

I think i had the same issue, i resolved this with adding this to the next js config: compiler: { styledComponents: true, },

[balazsorban44]

From the maintainer of MUI, It appears that v4 is not intended to be used with React 18: mui/material-ui#32685 (comment)

This is not a Next.js issue then, so I'm closing.

Those reporting an issue with styled-components, please create a separate issue with a reproduction.

[depiction]

balazsorban44 I have MUI v4 and React 18 working well together in another repo. Once Next.js is added to the mix, the error in this issue occurs.

[balazsorban44]

That other project might not rely on server-side rendering or static optimization, so hydration might not be a concern.

Useful resources:

• https://nextjs.org/docs/advanced-features/automatic-static-optimization
• https://reactjs.org/docs/react-dom-client.html#hydrateroot

[depiction]

balazsorban44 Correct, the other project doesn't use Next.js or any server side rendering.

The project that does have the issue uses Next.js with no dynamic content. All pages are built during the build process using content from a JSON file.

Therefore, I still believe this is a valid issue and should be reopened.

[balazsorban44]

Makes sense then. As commented above though, the MUI team does not consider v4 fit to be used with React 18 so there is nothing for the Next.js team to do here. You can try upgrading to the minimum recommended version and if you still see issues with Next.js, please add a new reproduction and let us know!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.