React启动遇到webpack报错-解决方案

1.背景

昨天买的4k显示器中午刚到，本来心情大好，准备继续写数据库课程项目的代码，结果打开webstorm一运行，好家伙44个errors。

明明昨天晚上还运行得好好的，怎么今天就成这样了…唉，只能硬着头皮改呗～

2.报错描述

报错基本分为两类：

1.Module not fount: Error: Can’t resolve ‘XXX’ in ‘XXXX’…

2.BREAKING CHANGE : web pack < 5 used to include …

3.解决方案

1.Module not fount: Error: Can’t resolve ‘XXX’ in ‘XXXX’…

解决方案：

npm i XXX --save

2.BREAKING CHANGE : web pack < 5 used to include …

解决方案：

（1）安装报错中提示的包（以path为例）

npm install path-browserify

（2）更改脚手架中webpack的配置文件webpack.config.js

地址： node_modules/react-scripts/config/webpack.config.js

module.exports = function (webpackEnv) {
  ...
  return {
   ...
    resolve: {
      ...
      fallback: {
        path: require.resolve("path-browserify"),
        // xxx: require.resolve("xxxxxxx"),
      }
    }
  }
}

（3）再次启动，检查其它错误，重复操作直至全部解决。

npm start

4.反思

虽然改掉BUG的过程比较有成就感，但是真正弄好之后还是觉得自己是傻叉。只过了一个晚上，项目就跑不起来了？仔细想了下，应该是因为昨天晚上又新建了个服务端的项目，可能是环境配置搞混淆了！
搞了一下午，最后发现这些问题其实完全可以避免，自己一开始的思路也是不对。好在最后还是成功恢复了，谢天谢地！

5.总结

下次再碰到这些非人为编辑而引起的报错，首先要检查环境的配置问题！
注意全局配置和非全局配置之间的影响，再遇此类问题先检查有没有全局的node_modules，有的话把全局的node_modules和项目内的node_modules全删了，然后再用npm install重新安装！