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

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

mui / material-ui