webpack、npm 相关错误汇总

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

（1）如下图：

搭建vue项目

使用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目录及文件，然后在项目根目录下执行卸载命令：cnpm uninstall webpack，最后重新安装较低版本的webpack：cnpm install webpack@3.12.0。 再次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

错误信息：

npm ERR! Unexpected token ， in JSON at position 2847 while parsing near '...compiler": "^2.5.2",，；
npm ERR!     "webpack": "^...'

原因： 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参数，如下：

.catch(err => {
...
}

解决： 方法一：修改规则：eslint handle-callback-err: “warn” ，但是没有根本解决问题。 方法二：在代码中使用err对象，如下：

      console.log('err:' + 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版本

(10) Error: HtmlWebpackPlugin: could not load file F:…\asset\favicon.ico

在单页面应用中的index.html加上： <link rel="shortcut icon" type="image/x-icon" href="./static/asset/favicon.ico">

（11）Fatal error in , line 0API fatal error handler returned after process out of memory

原因：webstorm内存不够用了，子进程太多。 解决： 方法一：调高webstorm可使用内存的大小。 方法二：重启webstorm。

（12）webstorm do not stop indexing.

Cause: Because the angular seed folder contains too many files, or others folders.

Solution: Go to webstorm preference, select menu "Directories ", select the fold that you want to Exclude, click “Exclude”, then click “Apply” and “OK”. As the following picture shows:

enter image description here

（13）Error: listen EADDRNOTAVAIL

原因： 本机IP变化了，没有和webpack配置中的IP保持一致。 解决方法： 使用ipconfig/ifconfig查看本机IP，将webpack中index.js的 host 改成本机IP，如果本机IP是DHCP分配的，那么host每次都需要改成对应的本机IP。

（14）sh: webpack-dev-server: command not found

原因： 没有安装对应的包。 解决方法： rm -rf node_modules && npm i **注意事项：**这条命令不是万能的，有的依赖包没有遵守npm官方的规则，包本身存在问题的话，该命令是无效的，需要找到正确的包。

（15）如图：

在这里插入图片描述

原因： 只要红框内两个图标之一存在感叹号，IDE或者编辑器就读取不到该文件。

解决方法： svn存在红色感叹号（即非“绿色勾”，webstorm对于目录下看不到该文件）需要重启webstorm；如果是“云朵图标”存在感叹号（sublime对于目录下存在该文件，但是对应程序仍然无法读取），则需要等待该文件从iCloud下载完成