[icons] Dev server breaks when icon is imported from @mui/icons-material/Icon

[marvinruder]

Steps to reproduce

1. Checkout branch material-icons of https://github.com/marvinruder/material-ui-pigment-css-vite-ts
2. Start dev server and open in browser

Current behavior

An empty page is shown with the following stack trace in the console:

Uncaught Error: Dynamic require of "@mui/material/utils" is not supported
    at chunk-7D4SUZUM.js?v=4726dafb:11:9
    at node_modules/@mui/icons-material/utils/createSvgIcon.js (createSvgIcon.js:13:14)
    at __require2 (chunk-7D4SUZUM.js?v=4726dafb:14:50)
    at node_modules/@mui/icons-material/Fingerprint.js (Fingerprint.js:9:45)
    at __require2 (chunk-7D4SUZUM.js?v=4726dafb:14:50)
    at Fingerprint.js:13:18

Expected behavior

The page is rendered normally.

Context

This issue does not occur when using vite preview (hosting static resources generated by vite build) or when importing icons from @mui/icons-material, like

import { Icon } from '@mui/icons-material';

However, the “safest [option] for bundle size” as advertised here is importing from @mui/icons-material/Icon, causing this issue.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 22.8.0 - /opt/homebrew/bin/node
    npm: 10.8.2 - /opt/homebrew/bin/npm
    pnpm: 8.15.5 - /opt/homebrew/bin/pnpm
  Browsers (issue reproducable in all available):
    Chrome: 128.0.6613.120
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react:  11.13.3 
    @emotion/styled:  11.13.0 
    @mui/core-downloads-tracker:  6.0.2 
    @mui/icons-material: latest => 6.0.2 
    @mui/material: latest => 6.0.2 
    @mui/material-pigment-css: latest => 6.0.2 
    @mui/private-theming:  6.0.2 
    @mui/styled-engine:  6.0.2 
    @mui/system:  6.0.2 
    @mui/types:  7.2.16 
    @mui/utils:  6.0.2 
    @pigment-css/react:  0.0.21 
    @pigment-css/vite-plugin: latest => 0.0.22 
    @types/react: latest => 18.3.5 
    react: latest => 18.3.1 
    react-dom: latest => 18.3.1 
    typescript: latest => 5.5.4 

Search keywords: icons

Search keywords:

[iM-GeeKy]

Relates to #43586

[marvinruder]

A workaround is given by #43586 (comment).

[marvinruder]

Fixed in v6.1.0, likely by #43624.

[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

We value your feedback @marvinruder! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!