React项目引入@material-ui/core时遭遇Module not found错误的求助

我之前也碰到过类似的模块找不到问题，结合你描述的情况，给你几个实用的排查和解决方向：

问题回顾 #

你在React项目的C:\Main Project\resumebuilder\src\components目录下的组件中使用：

import {Button,TextField} from '@material-ui/core'

时出现错误：

Module not found: Error: Can't resolve '@material-ui/core' in 'C:\Main Project\resumebuilder\src\components'

你已经尝试了检查package.json依赖、删除重装node_modules、核对导入拼写，但问题依然存在。

可能的解决方法 #

• 确认npm install的执行目录
  一定要确保你是在项目根目录（也就是包含package.json的C:\Main Project\resumebuilder文件夹）下运行的npm install命令。如果不小心在子目录（比如src/components）执行了安装，node_modules会被创建在错误的位置，React自然无法找到依赖包。

• 清除npm缓存后重新安装
  npm缓存偶尔会导致包安装不完整或损坏，试试执行以下步骤：

  # 清除npm缓存
  npm cache clean --force
  # Windows系统删除node_modules和package-lock.json
  rmdir /s /q node_modules
  del package-lock.json
  # 重新安装所有依赖
  npm install
  

• 检查@material-ui/core包的完整性
  打开项目根目录下的node_modules/@material-ui/core文件夹，确认里面存在Button、TextField对应的文件（比如Button/index.js）。如果文件夹为空或文件缺失，大概率是安装时网络问题导致包损坏，可以切换到国内npm源重新安装：

  # 切换到淘宝源
  npm config set registry https://registry.npmmirror.com/
  # 重新安装@material-ui/core
  npm install @material-ui/core
  

• 检查自定义webpack/babel配置（如果有）
  如果你手动配置了webpack，检查webpack.config.js中的resolve.modules是否包含node_modules，确保webpack能正确检索第三方依赖：

  resolve: {
    modules: ['node_modules', path.resolve(__dirname, 'src')]
  }
  

  要是漏掉了node_modules，webpack会找不到第三方包的位置。

• 注意Material UI的版本变更
  Material UI从v5版本开始，官方将包名从@material-ui/core改为了@mui/material。如果你的项目是新建的，更推荐使用最新的v5版本，操作如下：

  # 卸载旧包
  npm uninstall @material-ui/core
  # 安装v5版本的依赖
  npm install @mui/material @emotion/react @emotion/styled
  

  然后将组件中的导入语句修改为：

  import {Button, TextField} from '@mui/material'
  

备注：内容来源于stack exchange，提问作者Gouri krishna s