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?