warning prop classname did not match. server material-ui & next js

Warning: Prop className did not match. Server: "MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button css-rmvemx-MuiButtonBase-root-MuiListItem-root" Client: "MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button Mui-selected css-rmvemx-MuiButtonBase-root-MuiListItem-root"

I know that the react error has to do with what it generates on the server vs what is generated on the client, it hopes that ideally they are the same, but I don’t know why it is not and how to solve it.

I base myself on the installation of the example proposed by material-ui https://github.com/mui-org/material-ui/tree/next/examples/nextjs

This is my package.json file

"dependencies": {
    "@emotion/cache": "^11.4.0",
    "@emotion/react": "^11.4.0",
    "@emotion/server": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@material-ui/core": "^5.0.0-alpha.35",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/styles": "^4.11.4",
    "moment": "^2.29.1",
    "next": "latest",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }

[dohomi]

@oliviertassinari thanks I need to investigate further, I think as I have a SSG rendered page and one of my components is depending on user auth maybe thats where the problem relies. I might have to wait and re-hydrate differently. The issue just raised on upgrading NextJS and webpack so maybe the issue just got triggered through that upgrades. This might be the relevant issue which needs to be checked https://github.com/vercel/next.js/issues/26184#issuecomment-864083198

[abriginets]

@oliviertassinari I could give you access to my repo if you want a quick reproduction. You would only need to pull it and set a few env variables to reproduce. 1 minute long job.