MUI not working with React Router 7 and Vite

[anthonysapien]

Steps to reproduce

Steps:

1. Open this link to live example: Because this is a build issue, it's harder for me to provide a live example.
2. Follow the basic build steps for React Router 7: https://reactrouter.com/start/library/installation
3. Add a basic import of an @mui/icons-material icon to root.tsx.
4. Run npm run build && npm start

Current behavior

The React Router 7 server running node will fail to start, referring to inability to import directories and requiring specification of index.js files. If I hand patch or script patch the files, the issues seems to be endless and out of my depth as a non-library maintainer.

Expected behavior

I realize that you're planning for full ES module compatibility in an upcoming version. The problem is that I haven't been able to find any viable workaround after hours research, trial and error. I've tried the "esm" and "modern" folders. I've tried vite plugins, scripting to modify node_modules, esbuild, everything. I'd appreciate any help with a workaround or proper solution. React Router just released 7, and a lot of people are going to be excited to try using it.

Context

I'm trying to move from create-react-app to React Router 7, which comes with Vite, and use MUI.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.1.1
  Binaries:
    Node: 23.6.0 - ~/.nvm/versions/node/v23.6.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v23.6.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.265
    Edge: Not Found
    Safari: 18.1.1
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  6.3.1 
    @mui/icons-material: ^6.3.1 => 6.3.1 
    @mui/material: ^6.3.1 => 6.3.1 
    @mui/private-theming:  6.3.1 
    @mui/styled-engine:  6.3.1 
    @mui/system:  6.3.1 
    @mui/types:  7.2.21 
    @mui/utils:  6.3.1 
    @types/react: ^19.0.1 => 19.0.5 
    react: ^19.0.0 => 19.0.0 
    react-dom: ^19.0.0 => 19.0.0 
    typescript: ^5.7.2 => 5.7.3 

Search keywords: react-router vite

[mnajdova]

It's very likely it's related to ESM as you pointed out. Can you please check if your project will work with the resolutions defined in this PR's description: #43264

[anthonysapien]

Hi @mnajdova, thanks for responding. I was able to start the server in my React Router 7 test project using the PR that you recommended. NOTE: I typically use npm and needed to switch over to yarn to use the resolutions. This looks promising. Going to test it out on a larger project and will share findings here.

[anthonysapien]

Okay, that worked like a charm on a larger project that extensively uses @mui/material, @mui/lab, @mui/material-icons, @mui-x-data-grid, and @mui-x-date-pickers. I guessing that I should hold off on using this in production. Thanks for working on this, @Janpot.

[mnajdova]

We plan to include this changes in v7 (stable planned around March). We may release soon alpha/beta with this changes. And yes, not recommended for using in production right now. Thanks for validating the fix!

[anthonysapien]

@mnajdova, sure thing. Looking forward to trying out V7. Thanks, and good luck!