Import error when using Material UI styles with React router v7 framework

[kayden1940]

Steps to reproduce

Similar to this one mui/material-ui#42544
A fresh start of React router v7 framework template, installing and importing ReactRouterAppProvider yield below:

Directory import '/repo/packages/web/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emotion+styled_eyl2qwst7e3srdiktssoojso7e/node_modules/@mui/material/styles' is not supported resolving ES modules imported from /repo/packages/web/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emotion+styled_eyl2qwst7e3srdiktssoojso7e/node_modules/@toolpad/core/AppProvider/AppProvider.js Did you mean to import "@mui/material/node/styles/index.js"?
adding ssr noExternal in vite.config doesn't solve it.

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

System:
OS: macOS 15.2
Binaries:
Node: 22.8.0 - ~/.nvm/versions/node/v22.8.0/bin/node
npm: 10.8.2 - ~/.nvm/versions/node/v22.8.0/bin/npm
pnpm: 9.15.1 - ~/.nvm/versions/node/v22.8.0/bin/pnpm
Browsers:
Chrome: 133.0.6943.54
Edge: Not Found
Safari: 18.2
npmPackages:
@emotion/react: 11.14.0
@types/react: 19.0.8
react: 19.0.0
react-dom: 19.0.0
typescript: ^5 => 5.7.3

Search keywords: React router v7 framework

[Janpot]

I believe this would be solved by #4676

[Janpot]

A fresh start of React router v7 framework template

@kayden1940 which template are you talking about? Can you share a github link?

[kayden1940]

A fresh start of React router v7 framework template

@kayden1940 which template are you talking about? Can you share a github link?

https://github.com/remix-run/react-router-templates/tree/main/default

[Janpot]

#4686 will fix the import, but some extra setup will be needed to make sure the styles and the theme work correctly with SSR. See https://mui.com/material-ui/guides/server-rendering/

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@kayden1940 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[Janpot]

This is reverted until X packages are on the beta release