使用MUI组件报错：无法解析@mui/material，寻求解决办法

问题详情 #

无法正常使用基础MUI Button组件，触发以下报错：

react_1     | ERROR in ./src/components/formSubmit.js 6:0-39
react_1     | Module not found: Error: Can't resolve '@mui/material' in '/app/frontend/src/components'

已确认@mui/material已安装，npm ls输出显示依赖存在：

npm ls
frontend@0.1.0 /path/to/myapp/frontend
├── @emotion/react@11.11.3
├── @emotion/styled@11.11.0
├── @mui/icons-material@5.15.10
├── @mui/material@5.15.10
├── @testing-library/jest-dom@5.17.0
├── @testing-library/react@13.4.0
├── @testing-library/user-event@13.5.0
├── axios@1.6.7
├── react-dom@18.2.0
├── react-scripts@5.0.1
├── react@18.2.0
└── web-vitals@2.1.4

同时node_modules目录下存在@mui文件夹：

ls node_modules | grep mui
@mui

仅执行以下导入代码就触发错误：

import {Button} from '@mui/material';

解决方案 #

• 清除缓存并重新安装依赖：

  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  

• 确认项目根目录结构：确保package.json和node_modules位于同一层级（即/app/frontend/目录下），而非src子目录内。
• 重启开发服务器：缓存异常可能导致模块解析失败，重启后即可恢复。
• 检查webpack配置（自定义配置场景）：验证resolve.modules配置中包含node_modules目录，默认配置已包含，但自定义修改后需确认。
• 测试完整路径导入：尝试用相对路径导入组件，比如import {Button} from '../../node_modules/@mui/material/Button';，若能正常导入，说明模块解析路径存在问题，需检查环境变量或项目配置。

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