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 [email protected]。
再次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:

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

---

微信公衆號：技術很有趣，瞭解一下~