webpack、npm 相关错误汇总

不知道大家在用webpack结合前端框架的脚手架进行搭建项目时，会不会因为各种报错信息而苦恼？我会，特此汇总。

以下错误信息均因在系统终端执行命令后产生，出自终端执行命令npm run dev。

（1）如下图：

使用webstorm搭建vue项目，报如上错误。

本地node版本为10。

原因： 版本10 fs.promises的API是实验性的，webstorm不允许使用。

解决：卸载掉原有node.js，重新安装node.js 8版本。

（2）Error: Cannot find module ‘webpack/bin/config-yargs’

原因：webpack和webpack-dev-server版本不匹配。

解决：降低webpack版本

先删除node_modules目录及文件，然后在项目根目录下执行卸载命令：，最后重新安装较低版本的webpack：。

再次npm run dev，正常。

（3）Module build failed: Error: Missing……

原因： 编译失败

解决：npm rebuild

（4）执行npm run dev报错：npm ERR! Tell the package author to fix their package.json file. JSON.parse

可拖拽滚动条查看

原因： package.json格式有误，可以根据错误信息定位到错误出处。

解决：修改后，再次执行npm run dev

（5）执行npm run dev报错：throw er; // Unhandled ‘error’ event

原因： 项目中所需端口被其它程序占用

解决：修改后该项目端口或者关闭占用相同端口的其它程序 ，再次执行命令 npm run dev

（6）Refused to load the font ‘’ because it violates the following Content Security Policy directive: “default-src ‘self’”. Note that ‘font-src’ was not explicitly set, so ‘default-src’ is used as a fallback.

原因：谷歌浏览器Chrome扩展 ‘Grammarly’导致的。

解决：移除该扩展即可。

（7） http://eslint.org/docs/rules/handle-callback-err Expected error to be handled

原因：不符合eslint规则，代码中没有用到err参数，如下：

解决：

方法一：修改规则：eslint handle-callback-err: “warn” ，但是没有根本解决问题。

方法二：在代码中使用err对象，如下：

（8）npm ERR! enoent ENOENT: no such file or directory, open ‘F:\demo\path\package.json’

原因：命令执行的路径有问题

解决：在项目的根路径执行npm run dev

（9）Module not found: Error: Cannot resolve ‘file’ or ‘directory’

原因：webpack版本太老或者项目使用的是webpack-simple

解决：更改webpack版本