React 18.0搭配Material UI 5.0遇模块找不到错误的原因及解决方案问询

问题原因 #

1. 包名变更：Material UI 5（简称MUI5）已将包名从@material-ui/core改为@mui/material，使用旧导入路径会导致模块查找失败。
2. 依赖安装异常：可能未正确安装MUI5核心依赖，或同时存在旧版@material-ui/core与新版@mui/material引发冲突。
3. 缓存干扰：npm/yarn或webpack的缓存残留旧路径信息，导致解析逻辑异常。

可行解决方案 #

• 修正导入路径
  将所有从@material-ui/core导入的组件，替换为@mui/material路径。示例：

  // 错误写法
  import TextField from '@material-ui/core/TextField';
  // 正确写法
  import TextField from '@mui/material/TextField';
  

  Button、Card等其他组件需同步修改导入路径。

• 重新安装正确依赖

  1. 先卸载旧版Material UI相关包：

     npm uninstall @material-ui/core @material-ui/icons
     

  2. 安装MUI5核心依赖（默认使用emotion作为样式引擎）：

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

     若偏好styled-components，安装以下依赖：

     npm install @mui/material @mui/styled-engine-sc styled-components
     

• 清除缓存并重装依赖

  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
     

• 检查自定义webpack配置
  若项目自定义了webpack配置，确认是否硬编码了@material-ui/core的路径别名，或resolve配置限制了包的查找路径，如有则对应修改为@mui/material。

补充说明 #

MUI5完全支持React 18，不存在版本不兼容问题，本次报错与React版本无关，核心是包路径或依赖安装问题。

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