@mui/[email protected] does not work in create-react-app

[cmdcolin]

Steps to reproduce

Steps:

1. Open this link to live example: simple react component that renders an icon button with mui/icons-material delete icon
2. Clone https://github.com/cmdcolin/mui-icons-material-cra-error-repro
3. Run yarn
4. Run yarn start
5. See build error

Current behavior

Outputs

Failed to compile.

Module not found: Error: Can't resolve '@mui/icons-material/Delete' in '/home/cdiesh/my-app/src'
ERROR in ./src/index.js 6:0-52
Module not found: Error: Can't resolve '@mui/icons-material/Delete' in '/home/cdiesh/my-app/src'

webpack compiled with 1 error

Expected behavior

I would hope that this would still work

Context

maybe this issue is related but I believe #43264 caused @mui/icons-material to not work in create-react-app based apps

I see there is another thread here proposing to deprecate create-react-app
#45228

While my issue title mentions create-react-app, this is just a proxy for us: our actual project has a webpack based build system that has been continuously modernized and upgraded from a ejected CRA so it is not, in my belief, using anything "deprecated"...we just have a modern webpack 5 based build system

While a webpack based config is not what most people use (i imagine that would be vite now) it would be unfortunate to be unable to keep up to date with MUI just because we use webpack

I would ask, what is the icons-material package structure doing that caused this? Is there any way to, if it wants to continue with current changes, keep support with cra/webpack based builds? I don't know what particular limitation webpack might have surrounding this

If it is out of scope of the project, can close

Your environment

System:
OS: Linux 6.11 Ubuntu 24.10 24.10 (Oracular Oriole)
Binaries:
Node: 22.11.0 - /run/user/1001/fnm_multishells/53422_1738903375491/bin/node
npm: 10.9.0 - /run/user/1001/fnm_multishells/53422_1738903375491/bin/npm
pnpm: Not Found
Browsers:
Chrome: 131.0.6778.204
npmPackages:
@emotion/react: ^11.14.0 => 11.14.0
@emotion/styled: ^11.14.0 => 11.14.0
@mui/core-downloads-tracker: 6.4.3
@mui/material: ^6.4.3 => 6.4.3
@mui/private-theming: 6.4.3
@mui/styled-engine: 6.4.3
@mui/system: 6.4.3
@mui/types: 7.2.21
@mui/utils: 6.4.3
react: ^19.0.0 => 19.0.0
react-dom: ^19.0.0 => 19.0.0

Firefox 135

Search keywords: create-react-app,webpack,icons-material

(FWIW: I really appreciate all your guys work on the project!)

[cmdcolin]

I believe also does not work with plain "esbuild"

here is a repro for the esbuild case following from https://esbuild.github.io/getting-started/#bundling-for-the-browser

https://github.com/cmdcolin/mui-icons-material-esbuild-error-repro

it works with mui/[email protected] but not 6.4.3

[cmdcolin]

also errors in vite dev mode (which is esbuild based) https://github.com/cmdcolin/mui-icons-material-vite-error-repro

[cmdcolin]

also nextjs (webpack based iirc) https://github.com/cmdcolin/mui-icons-material-next-error-repro

[cmdcolin]

this may have been a bug with my yarn cache being messed up

I rm -rf ~/.cache/yarn and the bugs might have gone away. might be able to close for now. apologies for confusion

[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

@cmdcolin 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.