Material UI v6 + Remix + Vite running with “Prop className did not match” error

[onozaty]

Steps to reproduce

Execute the following repository,

• https://github.com/onozaty/remix-prisma/tree/mui-v6

Steps:

1. Open with DevContainer
2. npm run dev
3. Open http://127.0.0.1:5173/ in your browser

Current behavior

The following will appear in your browser's console

chunk-NUMECXU6.js?v=cbdf64e9:521 Warning: Prop `className` did not match. Server: "MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-5iifl-MuiPaper-root-MuiAppBar-root" Client: "MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-nt0iva-MuiPaper-root-MuiAppBar-root"
    at header
    at http://127.0.0.1:5173/node_modules/.vite/deps/chunk-56J7IAOU.js?v=cbdf64e9:528:45
    at Paper2 (http://127.0.0.1:5173/node_modules/.vite/deps/@mui_material.js?v=cbdf64e9:1478:17)
    at http://127.0.0.1:5173/node_modules/.vite/deps/chunk-56J7IAOU.js?v=cbdf64e9:528:45
    at AppBar2 (http://127.0.0.1:5173/node_modules/.vite/deps/@mui_material.js?v=cbdf64e9:4366:17)
    at div
    at http://127.0.0.1:5173/node_modules/.vite/deps/chunk-56J7IAOU.js?v=cbdf64e9:528:45
    at Box3 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3025:19)
    at div
    at http://127.0.0.1:5173/node_modules/.vite/deps/chunk-56J7IAOU.js?v=cbdf64e9:528:45
    at Container3 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:4495:19)
    at App
    at body
    at html
    at Layout (http://127.0.0.1:5173/app/root.tsx:9:3)
    at RenderedRoute (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:4279:5)
    at RenderErrorBoundary (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:4239:5)
    at DataRoutes (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:5270:5)
    at Router (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:4624:15)
    at RouterProvider (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:5085:5)
    at RemixErrorBoundary (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:7146:5)
    at RemixBrowser (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:8692:46)
    at DefaultPropsProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3404:3)
    at RtlProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3380:3)
    at ThemeProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3336:5)
    at ThemeProvider2 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3487:5)
    at ThemeProviderNoVars (http://127.0.0.1:5173/node_modules/.vite/deps/@mui_material.js?v=cbdf64e9:858:10)
    at ThemeProvider (http://127.0.0.1:5173/node_modules/.vite/deps/@mui_material.js?v=cbdf64e9:940:3)
    at MuiProvider (http://127.0.0.1:5173/app/mui.provider.tsx:12:3)

Expected behavior

Expect no errors in the browser console.

Context

This did not occur with Material UI v5.
The code for v5 is as follows.

• https://github.com/onozaty/remix-prisma/tree/mui-v5

When I upgraded from Material UI v5 to v6, I initially got the following error with npm run dev.

3:39:56 PM [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "@mui/icons-material"
|- /workspaces/remix-prisma/node_modules/@mui/icons-material/esm/index.js:1
export { default as Abc } from './Abc';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///workspaces/remix-prisma/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53536:15)
    at async ssrImport (file:///workspaces/remix-prisma/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53392:16)
    at async eval (/workspaces/remix-prisma/app/routes/customers+/index.tsx:5:31)
    at async instantiateModule (file:///workspaces/remix-prisma/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53451:5)

To avoid this, the following settings are added in vite.config.ts.

  ssr: {
    noExternal: [/^@mui\//],
  },

Now the screen itself can be displayed, but there is an error in the browser console.

Your environment

npx @mui/envinfo

  System:
    OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 20.15.1 - /usr/local/bin/node
    npm: 10.7.0 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/core-downloads-tracker:  6.1.2 
    @mui/icons-material: ^6.1.2 => 6.1.2 
    @mui/material: ^6.1.2 => 6.1.2 
    @mui/private-theming:  6.1.2 
    @mui/styled-engine:  6.1.2 
    @mui/system:  6.1.2 
    @mui/types:  7.2.17 
    @mui/utils:  6.1.2 
    @types/react: ^18.2.20 => 18.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.1.6 => 5.5.3 

Search keywords: Remix Vite

[s-hashimo]

Same here.
v6.0.2 works like v5 without any vite.config.ts updates.

My workaround (only works for v6.1.2, not for v6.1.1) is to update vite.config.ts as below:

  ssr: {
    noExternal: [process.env.NODE_ENV === 'development' ? '@mui/icons-material' : /^@mui\//],
  },

In my case, remix vite:dev needs @mui/icons-material, and remix vite:build needs /^@mui\//. 🤯

[DiegoAndai]

Hey @onozaty, thanks for the report, and sorry for the late reply.

I'm unable to run your repro. May I ask you to provide further details (maybe a video) on how to run it? I'm stuck so far as I'm unclear where I should run npm run dev. Running it on remix-prisma doesn't work. I've never used DevContainer before so I'm not familiar with it.

Thanks @s-hashimo for chiming in, about your investigation:

• "v6.0.2 works like v5 without any vite.config.ts updates."
  • This checks out as some minor ESM changes were introduced in 6.1.0 for the icons package
• "My workaround (only works for v6.1.2, not for v6.1.1)"
  • This doesn't make sense as no changes to the icons package were introduced in 6.1.2, could it be a caching issue on your side that's installing stale packages?

could you provide a minimal repro of the behavior you're experiencing? This would help debug whatever is happening.

[s-hashimo]

Thanks for replying. 😃

Here is my minimal? repro: https://github.com/s-hashimo/remix-vite-mui

And here are the commands to reproduce:

npm i
npm run dev

Warning: Prop className did not match. Server: "MuiTypography-root MuiTypography-h4 css-11pxkfa-MuiTypography-root" Client: "MuiTypography-root MuiTypography-h4 css-ys13zx-MuiTypography-root" Error Component Stack

It's based on the following two packages:

• https://github.com/mui/material-ui/tree/f56770186cef04959ef733fffddd1b86683cecda/examples/material-ui-remix-ts
• https://github.com/remix-run/remix/tree/9f06bfb7397daa8a3719552e2cbda7c4c8d06a38/templates/express

I suppose that the type=module in package.json causes "SyntaxError: Unexpected token 'export'".

[DiegoAndai]

Hey @onozaty, thanks for the repro.

I spent some time debugging this, but unfortunately, I still haven't figured out what's happening. I checked that the className mismatch warning also happens when using v5.16.6 (the latest v5 version) with the app you shared. Do you know of a v5 version in which this didn't happen?

We've had similar issues with next: #29428

I'm not seeing this error in our Remix example: https://github.com/mui/material-ui/tree/master/examples/material-ui-remix-ts, so if it's a possibility for you to start using that, then it might help. It might also help to compare with your current setup.

If you confirm that this is also happening in v5, I think we can accept the issue as a remix integration improvement.

[onozaty]

Thank you for working on this issue.

I spent some time debugging this, but unfortunately, I still haven't figured out what's happening. I checked that the className mismatch warning also happens when using v5.16.6 (the latest v5 version) with the app you shared. Do you know of a v5 version in which this didn't happen?

This did not occur in v5.16.7.
Below is the branch that confirmed it.

• https://github.com/onozaty/remix-prisma/tree/mui-v5

We've had similar issues with next: #29428

I'm not seeing this error in our Remix example: https://github.com/mui/material-ui/tree/master/examples/material-ui-remix-ts, so if it's a possibility for you to start using that, then it might help. It might also help to compare with your current setup.

This example provided by MUI does not use Vite.

The templates provided by Remix use Vite, and it is common practice to use Vite.
I think it will be easier for Remix users to use MUI if it becomes Vite-compatible as a template for MUI.

Thanks.

[samausir]

I get the SyntaxError: Unexpected token 'export' error here as well: node 20.17.0, remix 2.14.0, vite 5.4.10 and upgrading from mui 5.16.7 to 6.1.7. With node 22.11.0, the error changes to the below. Looks like in node 20 it's trying the import as cjs, but on node 22 it tries it as esm, and it's failing in either case:

Directory import '/Users/samir/Projects/client-portal/node_modules/.pnpm/@mui+icons-material@6.1.7_@mui+material@6.1.7_@emotion+react@11.13.3_@types+react@18.3.12_rea_fjnihmbedo2nhrt4stuurnmvmi/node_modules/@mui/material/utils' is not supported resolving ES modules imported from /Users/samir/Projects/client-portal/node_modules/.pnpm/@mui+icons-material@6.1.7_@mui+material@6.1.7_@emotion+react@11.13.3_@types+react@18.3.12_rea_fjnihmbedo2nhrt4stuurnmvmi/node_modules/@mui/icons-material/esm/utils/createSvgIcon.js
Did you mean to import "@mui/material/node/utils/index.js"?
at finalizeResolution (node:internal/modules/esm/resolve:251:11)
at moduleResolve (node:internal/modules/esm/resolve:913:10)
at defaultResolve (node:internal/modules/esm/resolve:1037:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12)
at ModuleLoader.#cachedDefaultResolve (node:internal/modules/esm/loader:599:25)
at ModuleLoader.resolve (node:internal/modules/esm/loader:582:38)
at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:241:38)
at ModuleJob._link (node:internal/modules/esm/module_job:132:49

[Janpot]

I'm out for two more weeks, but in the meantime, if anyone feels like trying out the same as #44055 (comment). I suspect the same root cause.

[samausir]

Hmm I tried this and the errors changed a little:

-    "@mui/icons-material": "6.1.7",
-    "@mui/material": "6.1.7",
-    "@mui/system": "6.1.7",
+    "@mui/icons-material": "https://pkg.csb.dev/mui/material-ui/commit/32a26054/@mui/icons-material",
+    "@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/32a26054/@mui/material",
+    "@mui/system": "https://pkg.csb.dev/mui/material-ui/commit/32a26054/@mui/system",

Node 20:

Unexpected token 'export'
at wrapSafe (node:internal/modules/cjs/loader:1378:20)
at Module._compile (node:internal/modules/cjs/loader:1428:41)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
at Module.load (node:internal/modules/cjs/loader:1288:32)
at Function.Module._load (node:internal/modules/cjs/loader:1104:12)
at cjsLoader (node:internal/modules/esm/translators:346:17)
at ModuleWrap. (node:internal/modules/esm/translators:286:7)
at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
at ModuleLoader.import (node:internal/modules/esm/loader:473:24)
at nodeImport (file:///Users/samir/Projects/client-portal/node_modules/.pnpm/vite@5.4.

Node 22:

Cannot find module '/Users/samir/Projects/client-portal/node_modules/.pnpm/@mui+icons-material@https+++pkg.csb.dev+mui+material-ui+commit+32a26054+@mui+icons-material_@cgxqzfntsowwhxpfsrw3v3vtae/node_modules/@mui/icons-material/esm/Abc' imported from /Users/samir/Projects/client-portal/node_modules/.pnpm/@mui+icons-material@https+++pkg.csb.dev+mui+material-ui+commit+32a26054+@mui+icons-material@_cgxqzfntsowwhxpfsrw3v3vtae/node_modules/@mui/icons-material/esm/index.js

[DiegoAndai]

Hey everyone, looked into this one again. I tested with the builds from #43264 and got the same errors @samausir encountered (shown above). What I found is that the @mui/icons-material/esm/ code was being incorrectly interpreted as CJS. Changing those files' extensions to .mjs and adding the extensions to the imports fixed the issues. @Janpot, it looks like we have to do both of those for the icons package as well to get rid of this issue.

[Janpot]

it looks like we have to do both of those for the icons package as well to get rid of this issue.

👍 yes, full esm support for node.js is planned for v7.