webpack、npm 相关错误汇总

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

（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目录及文件，然后在项目根目录下执行卸载命令：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.

原因: Because the angular seed folder contains too many files, or others folders. 即某些文件夹文件数量太多。

解决方法: 如果IDE是英文的话，按照下图进行操作——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（如图）:

（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下载完成。

（16）npm error: peerinvalid The package *** does not satisfy its siblings：

原因： nodejs版本太旧。

解决方法： 下载更新版本的nodejs。

（17）npm warn tar enoent no such file or directory open ‘XXXX’

原因： 暂时没有搞清楚。

解决方法：

1：删除package-lock.josn

2：npm install

18 Error: EPERM: operation not permitted, rename；npm ERR! errno -4048

发生背景： 执行 npm i 时报错。

原因： 执行 npm i 时包含了打开 Tomcat 服务器的npm包，由于之前的错误，忘记关闭 Tomcat 进程，导致它一直占用对应的npm包，手动也无法删除（用 rimraf 命令删除npm包更快 ）或者修改对应的npm包。

不是一般意义上的权限问题。笔者修改了对应npm包文件夹权限也不行，使用系统管理员权限执行 npm i 也不行。

解决方法： 关闭 Tomcat 进程。
补充：Vue项目出现该问题，解决方法——https://blog.csdn.net/TheBestAge/article/details/89074241

---

头条号 / 微信公众号：技术很有趣，了解一下~