导入@mui/icons-material/Web后React项目编译报错如何解决？

报错核心是@mui/icons-material与@mui/material版本不兼容。你本次更新的新版本图标包依赖更高版本@mui/material内置的utils模块，本地已安装的@mui/material版本较低，不存在对应模块，因此编译失败。后续的ENOENT: no such file or directory, stat '/initrd.img'是编译失败后触发的次生报错，主问题解决后会自动消失。

• 先删除本地旧依赖和锁文件，避免版本冲突残留：

rm -rf node_modules package-lock.json yarn.lock

• 清理npm缓存：

npm cache clean --force

• 重新安装对齐版本的依赖，保证@mui/icons-material与@mui/material版本必须完全匹配：

# 安装最新兼容版本
npm install @mui/material@latest @mui/icons-material@latest @emotion/react @emotion/styled

如果使用yarn作为包管理器，执行对应命令：

yarn add @mui/material@latest @mui/icons-material@latest @emotion/react @emotion/styled

如果项目有固定版本要求，手动指定两个包的版本号一致即可，示例：

npm install @mui/material@5.14.0 @mui/icons-material@5.14.0 @emotion/react @emotion/styled

• 重启项目验证：

npm run start

内容的提问来源于stack exchange，提问作者Zekarias Taye Hirpo