MUI v5导入图标报错Can't resolve '@mui/material/utils'问题问询

问题原因分析 #

1. 版本不兼容：初始依赖中同时存在MUI v4版本的@material-ui/core和v5版本的@mui/icons-material、@mui/lab，跨大版本的包命名规则、内部依赖路径完全不匹配，是触发报错的核心原因。
2. 安装命令错误：你执行的npm install @mui/material/utils不符合npm包安装规则，@mui/material/utils是@mui/material包内置的子模块，并非独立发布的npm包，直接安装会触发找不到package.json的报错。

正确解决步骤 #

• 首先卸载所有v4版本的MUI依赖，消除版本冲突：

npm uninstall @material-ui/core

• 安装MUI v5正式核心组件包（注意你后续安装的@mui/core是已废弃的alpha过渡包，推荐替换为正式发布的@mui/material），同时安装v5依赖的样式引擎：

npm install @mui/material @emotion/react @emotion/styled

• 若项目有单独使用工具类的需求，再独立安装@mui/utils包：

npm install @mui/utils

验证 #

配置完成后，package.json相关依赖应符合以下版本规则：

"@mui/material": "^5.0.0",
"@mui/icons-material": "^5.0.1",
"@mui/lab": "^5.0.0-alpha.49",
"@mui/utils": "^5.0.1",
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0"

此时重新启动项目，导入图标时的模块缺失报错即可解决。

内容的提问来源于stack exchange，提问作者Han