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重新安装!