[core] 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/icons-material@6.0.2 does not have the error
• ❌ @mui/icons-material@6.1.0 error (the change is ESM support)

with pnpm 9.12.2 + --turbo

• ❌ both @mui/icons-material@6.0.2 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?

[DiegoAndai]

Hey @FabianRueckert, and anyone stumbling upon this issue.

#43264 is the fix for this, but it's a breaking change we can't release outside a new major version. We will include this fix in the next major release.

If you need a workaround in the meantime, you can try to patch the @mui/ packages (except @mui/icons-material, which is already fixed) and add the "exports" field. You'll have to patch each package's package.json file, here's an example for @FabianRueckert's case in particular:

Example on how to patch package.json

patches/@mui__material.patch:

diff --git a/package.json b/package.json
index c9d5579e2422685a96a11c2acde9adab1f2e9ae7..dd28438fc0e16dfd617ad40cc99fc0c3a94451f3 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,18 @@
       ]
     }
   },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./node/index.js"
+    },
+    "./*": {
+      "types": "./*/index.d.ts",
+      "import": "./*/index.js",
+      "require": "./node/*/index.js"
+    }
+  },
   "module": "./index.js",
   "types": "./index.d.ts"
 }

patches/@mui__material-nextjs.patch:

diff --git a/package.json b/package.json
index 2e5bdee06ca058bfa8e704cc60dc2b90056f9e0a..23049962e5e00aaf786b4ff51e5c2c95ff418032 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,18 @@
     "access": "public",
     "directory": "build"
   },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./node/index.js"
+    },
+    "./*": {
+      "types": "./*/index.d.ts",
+      "import": "./*/index.js",
+      "require": "./node/*/index.js"
+    }
+  },
   "engines": {
     "node": ">=14.0.0"
   }

And here's documentation on how to patch depending on your package manager:

• pnpm
• yarn

This workaround's idea is to patch the @mui/ packages to be closer to #43264 layout until we can release that in the next major. It should be almost the same with other @mui/ packages. This is not required for the @mui/icons-material package.

Please reach out with a reproduction if the workaround is not working for you.

[Janpot]

Proper dual ESM/commonjs packages were released in 7.0.0-alpha.1. You can verify this with the following steps:

1. Set the version of all your @mui/* packages to next
2. Install dependencies (if you use npm, install with --legacy-peer-deps)

Please report back to us with a reproduction if the problem persists

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@FabianRueckert How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.