#npm i 錯誤解決記錄#

最開始錯誤 ：拉取代碼，增加依賴時，報錯

問題：

在安裝sass-loader@10.1.1時，發現與現有的webpack版本有沖突。

當前項目已經安裝了webpack@4.28.4（通過peer dependency requirements from other packages），但是sass-loader@10.1.1要求webpack的版本是^4.36.0 || ^5.0.0。

而當前項目中的webpack版本是4.28.4，低于4.36.0，因此不滿足要求。

（sass-loader@10.1.1?與項目中已安裝的?webpack@4.28.4?版本不兼容）

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: sass-loader@10.1.1
npm error Found: webpack@4.28.4
npm error node_modules/webpack
npm error   peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6
npm error   node_modules/@intervolga/optimize-cssnano-plugin
npm error     @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/cli-service@3.5.3
npm error     node_modules/@vue/cli-service
npm error       dev @vue/cli-service@"3.5.3" from the root project
npm error   peer webpack@"^4.0.0 || ^5.0.0" from @soda/friendly-errors-webpack-plugin@1.8.0
npm error   node_modules/@soda/friendly-errors-webpack-plugin
npm error     @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/cli-service@3.5.3
npm error     node_modules/@vue/cli-service
npm error       dev @vue/cli-service@"3.5.3" from the root project
npm error   19 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm error
npm error Could not resolve dependency:
npm error peer webpack@"^4.36.0 || ^5.0.0" from sass-loader@10.1.1
npm error node_modules/sass-loader
npm error   dev sass-loader@"10.1.1" from the root project
npm error
npm error Conflicting peer dependency: webpack@5.99.9
npm error node_modules/webpack
npm error   peer webpack@"^4.36.0 || ^5.0.0" from sass-loader@10.1.1
npm error   node_modules/sass-loader
npm error     dev sass-loader@"10.1.1" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

嘗試解決：npm uninstall sass-loader

但此時npm install sass-loader@8 --save-dev 執行時還是有問題（原因sass-loader@8.0.2也需要webpack@^4.36.0 || ^5.0.0，而我們的webpack是4.28.4（低于4.36.0），所以仍然不滿足）

pm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: jnpf-web@3.4.1
npm error Found: webpack@4.28.4
npm error node_modules/webpack
npm error   peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6
npm error   node_modules/@intervolga/optimize-cssnano-plugin
npm error     @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/cli-service@3.5.3
npm error     node_modules/@vue/cli-service
npm error       dev @vue/cli-service@"3.5.3" from the root project
npm error   peer webpack@"^4.0.0 || ^5.0.0" from @soda/friendly-errors-webpack-plugin@1.8.0
npm error   node_modules/@soda/friendly-errors-webpack-plugin
npm error     @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/cli-service@3.5.3
npm error     node_modules/@vue/cli-service
npm error       dev @vue/cli-service@"3.5.3" from the root project
npm error   19 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm error
npm error Could not resolve dependency:
npm error dev sass-loader@"8" from the root project
npm error
npm error Conflicting peer dependency: webpack@5.99.9
npm error node_modules/webpack
npm error   peer webpack@"^4.36.0 || ^5.0.0" from sass-loader@8.0.2
npm error   node_modules/sass-loader
npm error     dev sass-loader@"8" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

?

??解決：

先 npm uninstall sass-loader

再npm install sass-loader@7.3.1 --save-dev

（

查閱sass-loader的版本歷史：

- sass-loader v7.x 支持 webpack 4 (包括早期版本)

- 根據錯誤信息，sass-loader@8.0.2需要webpack>=4.36.0，所以如果我們用7.x版本，可能就可以兼容webpack4.28.4。

）

注意：?

不要使用?--force?或?--legacy-peer-deps：這會導致依賴樹混亂，可能在運行時崩潰