React Router v7 framework fails to build SPA with Material UI due to directory imports

[wrporter]

I'm using React Router as a...

framework

Reproduction

I'm migrating an app to React Router v7 framework as a SPA. When using Material UI, the build fails.

Reproduction: https://github.com/wrporter/react-router-mui-spa

1. I started with a new React Router v7 app with npx create-vite@latest.
2. I added MUI parts from the official example.

System Info

System:
    OS: macOS 15.3
    CPU: (12) arm64 Apple M3 Pro
    Memory: 176.50 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.0 - ~/.local/state/fnm_multishells/29156_1739035686558/bin/node
    Yarn: 4.6.0 - ~/.local/state/fnm_multishells/29156_1739035686558/bin/yarn
    npm: 10.9.2 - ~/.local/state/fnm_multishells/29156_1739035686558/bin/npm
  Browsers:
    Safari: 18.3
  npmPackages:
    @react-router/dev: ^7.1.5 => 7.1.5 
    @react-router/node: ^7.1.5 => 7.1.5 
    @react-router/serve: ^7.1.5 => 7.1.5 
    react-router: ^7.1.5 => 7.1.5 
    vite: ^5.4.11 => 5.4.14

Used Package Manager

npm

Expected Behavior

The SPA is created successfully.

Actual Behavior

Once I run npm run build, I get the following failure:

vite v5.4.14 building for production...
✓ 937 modules transformed.
build/client/.vite/manifest.json                  1.34 kB │ gzip:  0.33 kB
build/client/assets/with-props-DRtqOUB1.js        0.35 kB │ gzip:  0.21 kB
build/client/assets/root-BcjNS4m3.js              1.13 kB │ gzip:  0.64 kB
build/client/assets/home-DYrzp3lJ.js              9.57 kB │ gzip:  4.61 kB
build/client/assets/createTheme-zyLB0HyH.js      56.98 kB │ gzip: 19.93 kB
build/client/assets/chunk-IR6S3I6Y-r31vqN6p.js  106.00 kB │ gzip: 35.81 kB
build/client/assets/entry.client-DRjU8_SZ.js    196.68 kB │ gzip: 62.67 kB
✓ built in 1.09s
vite v5.4.14 building SSR bundle for production...
✓ 8 modules transformed.
build/server/.vite/manifest.json  0.17 kB
build/server/index.js             6.72 kB
x Build failed in 88ms
[react-router] Directory import '@mui/utils/formatMuiErrorMessage' is not supported resolving ES modules imported from @mui/material/styles/index.js
Did you mean to import "@mui/utils/formatMuiErrorMessage/index.js"?
    at finalizeResolution (node:internal/modules/esm/resolve:263:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1056:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:654:12)
    at ModuleLoader.#cachedDefaultResolve (node:internal/modules/esm/loader:603:25)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:586:38)
    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:242:38)
    at ModuleJob._link (node:internal/modules/esm/module_job:135:49) {
  code: 'PLUGIN_ERROR',
  url: 'file://@mui/utils/formatMuiErrorMessage',
  pluginCode: 'ERR_UNSUPPORTED_DIR_IMPORT',
  plugin: 'react-router',
  hook: 'writeBundle'
}

It looks like a build directory is (mostly?) successfully created, but the static site generation fails.

[anapeksha]

Same problem. Same problem also happens when serving the application in development mode. Not sure, why this happens.

[oneQiu]

+1 能不能快点处理这个问题

[shane-cc]

Same problem. Please help!

[wrporter]

I'm not certain, but I think the root cause of this issue is that MUI does not support ESM (just CJS). There is a plethora of issues about mixing CJS/ESM. I wonder if the proper way to handle this is not in React Router, but with Vite. This comment led me to a working solution. However, this breaks the dev build, which must build the assets differently. I'd love to understand how.

This is what my vite.config.ts currently looks like to support both dev and production builds.

const { NODE_ENV } = process.env;

export default defineConfig({
  // ... other config

  ssr: {
    noExternal:
      NODE_ENV === 'production'
        ? [
            '@mui/system',
            '@mui/material',
            '@mui/x-date-pickers',
            '@mui/utils',
            '@mui/x-data-grid',
            '@mui/styled-engine'
          ]
        : []
  }
}

Make sure to adjust the dependencies in ssr.noExternal applicable to your project.

[anapeksha]

Still same thing.

Directory import '..../Documents/Projects/dashboard-temp/node_modules/@mui/material/utils' is not supported resolving ES modules imported from /Users/anapeksha/Documents/Projects/dashboard-temp/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:263:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1056:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:654:12)
    at ModuleLoader.#cachedDefaultResolve (node:internal/modules/esm/loader:603:25)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:586:38)
    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:242:38)
    at ModuleJob._link (node:internal/modules/esm/module_job:135:49

[anapeksha]

Also, according to the roadmap, native support for esm for MUI would only be available from v7. Not sure how to handle this with vite.

[timdorr]

Unfortunately, this isn't a React Router issue. You should either bring this up with MUI (which looks like it may just be "wait for v7") or with Vite.

[StevenACoffman]

People who find this issue can follow along in MUI mui/material-ui#42544 (comment)

[uiarchitectsunil]

export default defineConfig({
  plugins: [ reactRouter(), tsconfigPaths()],
  ssr: {
    noExternal: [
      '@mui/*',
      '@emotion/*',
    ],
  },
  optimizeDeps:{
    include: [
      '@mui/*',
      '@emotion/*',
    ],
    force: true,
  }

Use this vite config it will resolve the issue. MUI 6 + React Router 7 with SPA