Nextjs + Mui V5 emotion example is still showing className mismatch error #29428

amaralc · 2021-10-31T16:15:00Z

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I've followed this example for nextjs + typescript; .

The example works out of the box, however, after adding @mui/styles, styling the component with makeStyles, adding media queries, and interacting with or refreshing the app, the style breaks and the className did not match from server-side rendering error occurs;

Expected Behavior 🤔

Hitting refresh or interacting with the application should not break the styles in any way, nor run into the error.

Steps to Reproduce 🕹

As described in the related issue #27512, in this comment:

@mnajdova, I'm still unsure of how to tackle the issue but it is worth mentioning that the issue is the same, following both, styled-components and emotion examples.

Detailed steps to reproduce:

(Terminal) Clone any of the available examples of nextjs + mui + typescript, (emotion or styled-components)
(Terminal) Install dependencies:
```
    yarn
```
(Terminal) Add @mui/styles dependency to use makeStyles:
```
 yarn add @mui/styles
```

(/pages/index) Import makeStyles and define classes:

ps: using media queries here since breakpoints + typescript + useStyles was leading to another error;

   // pages/index.tsx

   import Box from '@mui/material/Box';
   import Container from '@mui/material/Container';
   import Typography from '@mui/material/Typography';
   import { makeStyles } from '@mui/styles';
   import * as React from 'react';
   import Copyright from '../src/Copyright';
   import Link from '../src/Link';
   import ProTip from '../src/ProTip';
   
   export default function Index() {
   
     const classes = makeStyles(() => ({
       container: {
         '@media (max-width: 600px)': {
           fontSize: '20vw'
         },
         '@media (min-width: 601px)': {
           fontSize: '7rem'
         }
       }
     }))();
   
     return (
       <Container maxWidth="sm" className={classes.container}>
         <Box sx={{ my: 4 }}>
           <Typography variant="h4" component="h1" gutterBottom>
             Next.js v5-beta with TypeScript example
           </Typography>
           <Link href="/about" color="secondary">
             Go to the about page
           </Link>
           <ProTip />
           <Copyright />
         </Box>
       </Container>
     );
   }

(Terminal) Run project:

   yarn dev

(Browser) Access app on http://localhost:3000;
(Browser: DevTools) Set window to responsive and drag to force the media query responsive font size changes;
(Browser) ✔️ Verify that it is all running as expected ;
(Browser) Click on 'Go to the about page' link;
(Browser) ✔️ Verify that is all running as expected;
(Browser) Click to go back on the browser 'back' arrow;
(Browser) Refresh the page (F5);
(Browser) ❌ Verify that the style broke and the following error appear on the console:

  Warning: Prop `className` did not match. Server: "MuiContainer-root MuiContainer-maxWidthSm makeStyles-container-2 css-cuefkz-MuiContainer-root" Client: "MuiContainer-root MuiContainer-maxWidthSm makeStyles-container-1 css-cuefkz-MuiContainer-root"
      at div
      at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-99289b21.browser.esm.js:55:66)
      at Container (webpack-internal:///./node_modules/@mui/material/Container/Container.js:93:83)
      at Index (webpack-internal:///./pages/index.tsx:32:19)
      at InnerThemeProvider (webpack-internal:///./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:21:70)
      at ThemeProvider (webpack-internal:///./node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:47:5)
      at ThemeProvider (webpack-internal:///./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:41:5)
      at MyApp (webpack-internal:///./pages/_app.tsx:57:27)
      at StyleRegistry (webpack-internal:///./node_modules/styled-jsx/dist/stylesheet-registry.js:231:34)
      at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
      at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:90:23)
      at Container (webpack-internal:///./node_modules/next/dist/client/index.js:305:9)
      at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:745:26)
      at Root (webpack-internal:///./node_modules/next/dist/client/index.js:866:27)
  printWarning @ react-dom.development.js?ac89:67
  error @ react-dom.development.js?ac89:43
  warnForPropDifference @ react-dom.development.js?ac89:8824
  diffHydratedProperties @ react-dom.development.js?ac89:9645
  hydrateInstance @ react-dom.development.js?ac89:10400
  prepareToHydrateHostInstance @ react-dom.development.js?ac89:14616
  completeWork @ react-dom.development.js?ac89:19458
  completeUnitOfWork @ react-dom.development.js?ac89:22815
  performUnitOfWork @ react-dom.development.js?ac89:22787
  workLoopSync @ react-dom.development.js?ac89:22707
  renderRootSync @ react-dom.development.js?ac89:22670
  performSyncWorkOnRoot @ react-dom.development.js?ac89:22293
  scheduleUpdateOnFiber @ react-dom.development.js?ac89:21881
  updateContainer @ react-dom.development.js?ac89:25482
  eval @ react-dom.development.js?ac89:26021
  unbatchedUpdates @ react-dom.development.js?ac89:22431
  legacyRenderSubtreeIntoContainer @ react-dom.development.js?ac89:26020
  hydrate @ react-dom.development.js?ac89:26086
  renderReactElement @ index.js?46cb:488
  doRender @ index.js?46cb:709
  _callee$ @ index.js?46cb:384
  tryCatch @ runtime.js?2d8a:45
  invoke @ runtime.js?2d8a:274
  prototype.<computed> @ runtime.js?2d8a:97
  asyncGeneratorStep @ index.js?46cb:31
  _next @ index.js?46cb:49
  eval @ index.js?46cb:54
  eval @ index.js?46cb:46
  _render @ index.js?46cb:403
  render @ index.js?46cb:406
  eval @ next-dev.js?3515:76
  eval @ fouc.js?0087:12
  requestAnimationFrame (async)
  displayContent @ fouc.js?0087:7
  eval @ next-dev.js?3515:75
  Promise.then (async)
  eval @ next-dev.js?3515:38
  ./node_modules/next/dist/client/next-dev.js @ main.js?ts=1635690486095:578
  options.factory @ webpack.js?ts=1635690486095:633
  __webpack_require__ @ webpack.js?ts=1635690486095:37
  __webpack_exec__ @ main.js?ts=1635690486095:1247
  (anonymous) @ main.js?ts=1635690486095:1248
  webpackJsonpCallback @ webpack.js?ts=1635690486095:1179
  (anonymous) @ main.js?ts=1635690486095:9
  Show 2 more frames

Context 🔦

I have been trying to setup a Next.js (v12) + TypeScript + MUI v5 application, using makeStyles, breakpoints and other theme related customizations for two days, but ran into many different errors. I tested the emotion and styled-components implementations and both share this specific issue.

Your Environment 🌎

`npx @mui/envinfo`

I have tested with Chrome: 95.0.4638.69

 System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
  Binaries:
    Node: 16.13.0 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 8.1.0 - /usr/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Firefox: 93.0

The text was updated successfully, but these errors were encountered:

mnajdova · 2021-11-01T09:39:35Z

@amaralc @mui/styles is using JSS as a styling engine. Did you configure JSS for SSR? You can see how this can be done in the examples for v4 - https://github.com/mui-org/material-ui/tree/v4.x/examples/nextjs If you would like to use it with v5, you need to configure SSR for both emotion and JSS.

We do not want to advise developers to use both emotion and JSS in their bundle. If you wish to continue to use the makeStyles API, I would suggest taking a look in tss-react which is an emotion API similar to the one in @mui/styles.

amaralc · 2021-11-01T13:14:50Z

Thanks for the reply @mnajdova!

@amaralc @mui/styles is using JSS as a styling engine. Did you configure JSS for SSR? You can see how this can be done in the examples for v4 - https://github.com/mui-org/material-ui/tree/v4.x/examples/nextjs If you would like to use it with v5, you need to configure SSR for both emotion and JSS.

We do not want to advise developers to use both emotion and JSS in their bundle. If you wish to continue to use the makeStyles API, I would suggest taking a look in tss-react which is an emotion API similar to the one in @mui/styles.

I did not configure JSS for SSR since I couldn't find it on v5 docs.

I ended up choosing to live without the makeStyles API and moving to styled API only, with emotion. PR #29434, adds a styled component to the example, reflecting that choice, since other developers might be facing the same struggle.

mnajdova · 2021-11-02T08:43:54Z

I did not configure JSS for SSR since I couldn't find it on v5 docs.

We intentionally don't document this, as it is not used in the core components and the @mui/styles package is marked as legacy.

I am closing this.

kazukinagata · 2022-01-04T12:08:05Z

@mnajdova I am one of those who faced this struggle. I think it's better to document as long as makeStyles API is living.
In a large project using MUI V4, it is not easy to strip off makeStyles, so emotion and JSS will have to live together for a while.

SalahAdDin · 2022-06-01T19:54:16Z

I am having this error in MUI 5 with NextJS 12.

mnajdova · 2022-06-03T10:53:10Z

Looks like this is a struggle for lot of people. I am reopening. We started to work a bit on improving the migration guide in #32740

Will it help if we add as a link in the migration guide an example project for using both @mui/material + @mui/styles? I will start drafting this so that we can link it to people using these packages side by side during the migration or even afterward.

Note: @mui/styles is not concurrent mode friendly, so if you are updating React to v18, you will likely need to upgrade to using styled & sx, or move to tss-react that is a similar API to @mui/styles, but using emotion.

SalahAdDin · 2022-06-03T11:31:33Z

Looks like this is a struggle for lot of people. I am reopening. We started to work a bit on improving the migration guide in #32740

Will it help if we add as a link in the migration guide an example project for using both @mui/material + @mui/styles? I will start drafting this so that we can link it to people using these packages side by side during the migration or even afterward.

Note: @mui/styles is not concurrent mode friendly, so if you are updating React to v18, you will likely need to upgrade to using styled & sx, or move to tss-react that is a similar API to @mui/styles, but using emotion.

If it is helpful: I'm getting this specific problem only with the Badge component.

FitFingers · 2022-07-03T15:50:51Z

I am having this error in MUI 5 with NextJS 12.

I'm using the same setup and I, too, only had this issue with one or two components.
I realised (thanks to mnajdova's reply) that in those components I was importing the styled API from @mui/styles instead of @mui/material.
Changing that fixed the issue for me.

amaralc added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 31, 2021

amaralc mentioned this issue Oct 31, 2021

[examples] Add example component using styled api #29434

Closed

1 task

mnajdova added package: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5. and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 1, 2021

mnajdova closed this as completed Nov 2, 2021

mnajdova reopened this Jun 3, 2022

mnajdova added the docs Improvements or additions to the documentation label Jun 3, 2022

mnajdova self-assigned this Jun 3, 2022

mnajdova mentioned this issue Jun 3, 2022

[examples] Add example using nextjs & @mui/styles as a starter for the migration to v5 #33005

Merged

mnajdova closed this as completed in #33005 Jun 15, 2022

DiegoAndai mentioned this issue Nov 8, 2024

Material UI v6 + Remix + Vite running with “Prop className did not match” error #43980

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nextjs + Mui V5 emotion example is still showing className mismatch error #29428

Nextjs + Mui V5 emotion example is still showing className mismatch error #29428

amaralc commented Oct 31, 2021 •

edited

Loading

mnajdova commented Nov 1, 2021

amaralc commented Nov 1, 2021 •

edited

Loading

mnajdova commented Nov 2, 2021

kazukinagata commented Jan 4, 2022 •

edited

Loading

SalahAdDin commented Jun 1, 2022

mnajdova commented Jun 3, 2022 •

edited

Loading

SalahAdDin commented Jun 3, 2022

FitFingers commented Jul 3, 2022 •

edited

Loading

Nextjs + Mui V5 emotion example is still showing className mismatch error #29428

Nextjs + Mui V5 emotion example is still showing className mismatch error #29428

Comments

amaralc commented Oct 31, 2021 • edited Loading

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Context 🔦

Your Environment 🌎

mnajdova commented Nov 1, 2021

amaralc commented Nov 1, 2021 • edited Loading

mnajdova commented Nov 2, 2021

kazukinagata commented Jan 4, 2022 • edited Loading

SalahAdDin commented Jun 1, 2022

mnajdova commented Jun 3, 2022 • edited Loading

SalahAdDin commented Jun 3, 2022

FitFingers commented Jul 3, 2022 • edited Loading

amaralc commented Oct 31, 2021 •

edited

Loading

amaralc commented Nov 1, 2021 •

edited

Loading

kazukinagata commented Jan 4, 2022 •

edited

Loading

mnajdova commented Jun 3, 2022 •

edited

Loading

FitFingers commented Jul 3, 2022 •

edited

Loading