安装@emotion相关依赖后仍提示找不到@emotion/react模块如何解决

解决方案 #

• 第一步：清理本地无效依赖与缓存
  删除项目根目录下的node_modules文件夹、package-lock.json文件，执行命令清理npm缓存：

  npm cache clean --force
  

• 第二步：重新写入并安装依赖
  你当前的package.json中没有@emotion/react的依赖记录，说明之前执行的安装命令未成功写入依赖文件，执行如下命令安装emotion相关依赖同时写入生产依赖配置：

  npm install @emotion/react @emotion/styled --save
  

• 第三步：排查UI库版本冲突
  你当前项目同时安装了v4版本的@material-ui/core和v5版本的@mui/material，两个版本的样式依赖方案存在差异，共存会导致依赖引用优先级异常。若无需同时使用两个版本的UI库，建议卸载不需要的版本：
  卸载v4版本执行：

  npm uninstall @material-ui/core
  

  卸载v5版本执行：

  npm uninstall @mui/material
  

• 第四步：重启项目测试
  依赖安装完成后执行npm start重新启动项目即可。

如果上述操作后仍有报错，可以切换npm官方源后重复上述步骤，避免镜像源同步不完整导致的包损坏：

npm config set registry https://registry.npmjs.org/

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