Hydration error in next.js with MUI after upgrading Emotion

jakeleventhal commented 3 months ago

Steps to reproduce

I am using a <LoadingButton /> in my app. I can't reliably reproduce this. In most cases, it works fine. Sometimes it doesn't.

Current behavior

Button uses default MUI styling and ignores all the theme overrides I have upon a hard refresh. When navigating to the page via next.js routing, it works fine. Then if I refresh, the styles use the default MUI stylings. In the console I get the following warning:

[Error] Warning: Prop `className` did not match. Server: "MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-fullWidth css-sppx0e-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root" Client: "MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-fullWidth MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-fullWidth css-e1igr2-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
button
MuiButtonBase-root
ButtonBase
MuiButton-root
Button
MuiLoadingButton-root
LoadingButton
div
Styled(div)
Box
form
div
Styled(div)
Box
section
MuiContainer-root
Container
div
Styled(div)
Box
ContentWrapper
ContactFormSection
ContactUs
Contact
div
Styled(div)
Box
div
Styled(div)
Box
HeaderStateContext
DefaultLayout
ConfirmationDialogProvider
Component@
QueryClientProvider
ReactQueryWrapper
Component@
SnackbarProvider
RtlProvider
ThemeProvider
ThemeProvider
ThemeProvider
ThemeProvider
SettingsProvider
div
MotionComponent
LazyMotion
MotionLazy
App
AppLayout
Provider
Integrow
PathnameContextProviderAdapter
PureComponent@
ReactDevOverlay
Component@
AppContainer
Root
"
See more info here: https://nextjs.org/docs/messages/react-hydration-error"
    (anonymous function) (hydration-error-info.js:63)
    (anonymous function) (setup-hydration-warning.js:18)
    printWarning (react-dom.development.js:86)
    error (react-dom.development.js:60)
    warnForPropDifference (react-dom.development.js:9571)
    diffHydratedProperties (react-dom.development.js:10414)
    prepareToHydrateHostInstance (react-dom.development.js:12564)
    completeWork (react-dom.development.js:22176)
    completeUnitOfWork (react-dom.development.js:26591)
    performUnitOfWork (react-dom.development.js:26563)
    workLoopSync (react-dom.development.js:26461)
    renderRootSync (react-dom.development.js:26429)
    performConcurrentWorkOnRoot (react-dom.development.js:25733:89)
    workLoop (scheduler.development.js:266)
    flushWork (scheduler.development.js:239)
    performWorkUntilDeadline (scheduler.development.js:533)

In the screenshot you can see the difference. The fonts/styles are using the default MUI styles:

Expected behavior

Button loads with correct styles always

Context

No response

Your environment

  System:
    OS: macOS 15.0
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: 9.5.0 - ~/.nvm/versions/node/v20.14.0/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.183
    Edge: Not Found
    Safari: 18.0
  npmPackages:
    @mui/lab: 5.0.0-alpha.171 => 5.0.0-alpha.171 
    @mui/material: 5.16.4 => 5.16.4 
    @mui/material-nextjs: 5.16.4 => 5.16.4 
    @types/react: 18.3.3 => 18.3.3 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1

Tried in safari and chrome

Search keywords: loadingbutton hydration

ddembo commented 3 months ago

We are also experiencing this issue, after updating emotion dependencies, we are getting hydration errors in styled MUI components. I raised an issue. @emotion/styled and other packages are a peer dependency of multiple MUI packages.

robneir commented 3 months ago

Amen plz we have this issue too

OliverwengFiltered commented 3 months ago

same here!

PeanutButte7 commented 3 months ago

Same problem here with Nextjs Pages router. For anyone looking for a fix, I recommend trying to override "@emotion/serialize" as mentioned in the linked issue by @ddembo

mui / material-ui