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

onozaty · 2024-10-03T16:04:20Z

Steps to reproduce

Execute the following repository,

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

Steps:

Open with DevContainer
npm run dev
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

The text was updated successfully, but these errors were encountered:

s-hashimo · 2024-10-10T05:34:21Z

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 · 2024-11-05T14:00:09Z

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 · 2024-11-08T09:29:50Z

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:

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

DiegoAndai · 2024-11-08T15:40:51Z

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 · 2024-11-09T23:31:28Z

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 · 2024-11-19T15:27:41Z

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 [email protected]_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 [email protected]_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 · 2024-11-19T17:31:33Z

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 · 2024-11-20T10:24:15Z

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/[email protected].

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 · 2024-11-29T17:44:36Z

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 · 2024-11-29T23:07:39Z

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.

mikezx6r · 2024-12-03T12:02:10Z

To clarify, does this mean it won't be usable until v7, or is there an earlier patch coming?

DiegoAndai · 2024-12-03T19:32:15Z

@mikezx6r may I ask you which package manager are you using?

@Janpot can you think of a way to workaround this in the meantime?

I tried patching, but couldn't get it working with npm (and couldn't repro with yarn or pnpm)

In the meantime, if anyone wants to give it a try, I think following a similar approach as this comment might work, let us know.

mikezx6r · 2024-12-03T20:00:12Z

I am using npm. Will take a look at link to see if it helps

mikezx6r · 2024-12-04T03:10:52Z

@DiegoAndai I've read the comment, but it claims that icons-material has already been fixed.

In my case, that's the ONLY package that is giving me issues. Here's a link to a small project that demonstrates the issue.
https://github.com/mikezx6r/react-router-mui-icon-issue

Let me know if there's anything else I can do for this, or if I didn't understand the suggestions in the comment correctly

Janpot · 2024-12-04T06:31:20Z

@Janpot can you think of a way to workaround this in the meantime?

I haven't tested this, but since you're already patching, you could try to patch the icons package and remove its exports field in the package.json. Then add this alias to your vite config.

I'm sorry, I'll still be out a bit longer (paternity leave). Should be back by January.

DiegoAndai · 2024-12-05T12:56:34Z

In my case, that's the ONLY package that is giving me issues.

If the icons package is the only one giving issues, have you tried pinning it to a previous version? That might work, and you can unpin it once v7 is released. This package won't receive significant updates in v6, so I don't expect you missing anything if you pin it to a previous version that works.

Let me know.

samausir · 2024-12-05T15:05:41Z

@DiegoAndai pinning icons-material to v5 solved my problem 👍
Thanks for the suggestion!

DiegoAndai · 2024-12-05T20:09:26Z

I'm glad to hear that @samausir. I think you should also be able to use v6.0.2.
When v7 comes out, you should be able to migrate to it and not have this issue.

samausir · 2024-12-06T07:38:43Z

Can confirm v6.0.2 works too 👍

onozaty added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 3, 2024

zannager added package: material-ui Specific to @mui/material v6.x migration labels Oct 4, 2024

zannager assigned siriwatknp Oct 4, 2024

DiegoAndai added this to Material UI Oct 14, 2024

DiegoAndai moved this to Backlog in Material UI Oct 14, 2024

siriwatknp removed their assignment Oct 21, 2024

siriwatknp moved this from Backlog to Selected in Material UI Oct 21, 2024

siriwatknp added the package: icons Specific to @mui/icons label Oct 21, 2024

siriwatknp assigned Janpot Oct 21, 2024

mnajdova assigned DiegoAndai and unassigned Janpot Nov 4, 2024

DiegoAndai added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 5, 2024

DiegoAndai moved this from Selected to In progress in Material UI Nov 5, 2024

DiegoAndai moved this from In progress to Waiting for response in Material UI Nov 7, 2024

github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Nov 9, 2024

DiegoAndai added bug 🐛 Something doesn't work and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 29, 2024

DiegoAndai moved this from Waiting for response to In progress in Material UI Nov 29, 2024

This was referenced Nov 29, 2024

[code-infra] Update package layout for better ESM support #43264

Draft

[icons-material] Importing from @mui/icons-material throws error in Remix/Vite #44265

Open

mikezx6r mentioned this issue Dec 3, 2024

Inability to use MUI icons and react-router vite plugin remix-run/react-router#12449

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

onozaty commented Oct 3, 2024 •

edited by github-actions bot

Loading

s-hashimo commented Oct 10, 2024

DiegoAndai commented Nov 5, 2024

s-hashimo commented Nov 8, 2024

DiegoAndai commented Nov 8, 2024

onozaty commented Nov 9, 2024

samausir commented Nov 19, 2024

Janpot commented Nov 19, 2024

samausir commented Nov 20, 2024 •

edited

Loading

DiegoAndai commented Nov 29, 2024

Janpot commented Nov 29, 2024 •

edited

Loading

mikezx6r commented Dec 3, 2024

DiegoAndai commented Dec 3, 2024

mikezx6r commented Dec 3, 2024 via email •

edited

Loading

mikezx6r commented Dec 4, 2024

Janpot commented Dec 4, 2024

DiegoAndai commented Dec 5, 2024

samausir commented Dec 5, 2024

DiegoAndai commented Dec 5, 2024

samausir commented Dec 6, 2024

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

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

Comments

onozaty commented Oct 3, 2024 • edited by github-actions bot Loading

Steps to reproduce

Current behavior

Expected behavior

Context

Your environment

s-hashimo commented Oct 10, 2024

DiegoAndai commented Nov 5, 2024

s-hashimo commented Nov 8, 2024

DiegoAndai commented Nov 8, 2024

onozaty commented Nov 9, 2024

samausir commented Nov 19, 2024

Janpot commented Nov 19, 2024

samausir commented Nov 20, 2024 • edited Loading

DiegoAndai commented Nov 29, 2024

Janpot commented Nov 29, 2024 • edited Loading

mikezx6r commented Dec 3, 2024

DiegoAndai commented Dec 3, 2024

mikezx6r commented Dec 3, 2024 via email • edited Loading

mikezx6r commented Dec 4, 2024

Janpot commented Dec 4, 2024

DiegoAndai commented Dec 5, 2024

samausir commented Dec 5, 2024

DiegoAndai commented Dec 5, 2024

samausir commented Dec 6, 2024

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

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

onozaty commented Oct 3, 2024 •

edited by github-actions bot

Loading

samausir commented Nov 20, 2024 •

edited

Loading

Janpot commented Nov 29, 2024 •

edited

Loading

mikezx6r commented Dec 3, 2024 via email •

edited

Loading