npm安装@mui/icons-material后启动报错：无法解析react/jsx-runtime

以下是针对你遇到问题的可行解决方案：

• 检查React版本兼容性
  MUI Icons Material v5及以上版本要求React 17.0.0+，而react/jsx-runtime是React 17开始内置的核心模块。如果你的项目使用React 16或更早版本，需要手动安装该包：

  npm install react/jsx-runtime --save
  

  可以通过npm list react命令查看当前项目的React版本。

• 清理依赖缓存并重装
  强制安装依赖容易导致依赖树混乱，引发重复文件或版本不一致问题：

  1. 清理npm缓存：npm cache clean --force
  2. 删除本地依赖目录和锁文件：
     • macOS/Linux：rm -rf node_modules package-lock.json
     • Windows：rmdir /s /q node_modules && del package-lock.json
  3. 重新安装所有依赖：npm install
  4. 单独安装MUI图标包：npm install @mui/icons-material

• 解决重复的Delete.js文件
  路径下出现两个Delete.js文件，基本是依赖重复安装导致的冗余文件。按照上面的清理重装步骤操作后，依赖会重新构建成一致的结构，重复文件会被自动清理。

• 检查Babel配置（若自定义过）
  如果项目手动配置了Babel，需要确保@babel/preset-react启用了自动runtime模式，这样会自动处理react/jsx-runtime的导入：

  {
    "presets": [
      ["@babel/preset-react", {
        "runtime": "automatic"
      }]
    ]
  }
  

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