Hydration error using nextjs turbopack and icons-material

[FabianRueckert]

Steps to reproduce

Link to live example: https://codesandbox.io/p/devbox/elegant-alex-xrjs5l

Steps:

1. Check out the example from https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router-ts
2. Add an icon from @mui/icons-material to index.ts
3. Start with turbopack with next dev --turbo
4. See error in the console
   

Related to #34905

Current behavior

Hydration Error:

Warning: Prop `className` did not match. Server: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root" Client: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-4uxqju-MuiSvgIcon-root"

index.js:8 Warning: Prop `className` did not match. Server: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-20bmp1-MuiSvgIcon-root" Client: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  mui-1slccg-MuiSvgIcon-root"
    at svg
    at https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:1020:141
    at SvgIcon (https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:6461:180)
    at RefreshIcon
    at div
    at https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:1020:141
    at Box (https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:12397:162)
    at div
    at https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:1020:141
    at Container (https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:10685:23)
    at Home
    at DefaultPropsProvider (https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:11525:11)
    at RtlProvider (https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:10829:11)
    at ThemeProvider (https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:15567:13)
    at ThemeProvider (https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:11631:13)
    at CssVarsProvider (https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:11729:17)
    at ThemeProvider (https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:4262:11)
    at AppCacheProvider (https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:13350:11)
    at MyApp (https://xrjs5l-3000.csb.app/_next/static/chunks/pages__app_tsx_035eb2._.js:22:13)
    at PathnameContextProviderAdapter (https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:25194:11)
    at ErrorBoundary (https://xrjs5l-3000.csb.app/_next/static/chunks/%5Bnext%5D_overlay_client_ts_eac06c._.js:6040:1)
    at ReactDevOverlay (https://xrjs5l-3000.csb.app/_next/static/chunks/%5Bnext%5D_overlay_client_ts_eac06c._.js:6266:11)
    at Container (https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:26292:1)
    at AppContainer (https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:26375:11)
    at Root (https://xrjs5l-3000.csb.app/_next/static/chunks/node_modules_975935._.js:26524:11)

Expected behavior

No hydration error.

Context

Trying to run NextJS with MUI and turbopack.

Your environment

See codesandbox

Search keywords: nextjs hydration error mui icons turbopack

[DiegoAndai]

@siriwatknp may I ask you to take a look at this one?

[siriwatknp]

It's related to package manager from what I've tried but not sure what's the root cause.

with yarn 1.22.19 + --turbo

• ✅ @mui/[email protected] does not have the error
• ❌ @mui/[email protected] error (the change is ESM support)

with pnpm 9.12.2 + --turbo

• ❌ both @mui/[email protected] and 6.1.0 don't work

However, without using --turbo, everything works just fine.

cc @Janpot do you know what might be the root cause of this?

The error seems to be that the icons does not use the cache from the custom CacheProvider in @mui/material-nextjs, very much like it's using a different version or there are duplicated of instances.

[Janpot]

@siriwatknp can you try with the codesandbox builds of #43264 (all @mui packages)

[siriwatknp]

@siriwatknp can you try with the codesandbox builds of #43264 (all @mui packages)

Awesome, it works with yarn and pnpm.

[DiegoAndai]

@siriwatknp @Janpot so this one will be fixed by #43264? Is there a workaround we can provide in the meantime?