解決 npm 依賴沖突報錯記錄

最近在使用 npm 安裝項目依賴時，遇到了一個關(guān)于依賴沖突的問題，特此記錄一下解決過程。

報錯內(nèi)容如下

# npm resolution error report

While resolving: awesome-typescript-loader@5.2.1
Found: typescript@4.9.5
node_modules/typescript
  dev typescript@"^4.4.4" from the root project
  peer typescript@"*" from ts-loader@9.4.4
  node_modules/ts-loader
    dev ts-loader@"^9.2.6" from the root project
  peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" from tsutils@3.21.0
  node_modules/tsutils
    tsutils@"^3.21.0" from @typescript-eslint/eslint-plugin@5.62.0
    node_modules/@typescript-eslint/eslint-plugin
      dev @typescript-eslint/eslint-plugin@"^5.3.0" from the root project
    tsutils@"^3.21.0" from @typescript-eslint/type-utils@5.62.0
    node_modules/@typescript-eslint/type-utils
      @typescript-eslint/type-utils@"5.62.0" from @typescript-eslint/eslint-plugin@5.62.0
      node_modules/@typescript-eslint/eslint-plugin
        dev @typescript-eslint/eslint-plugin@"^5.3.0" from the root project
    tsutils@"^3.21.0" from @typescript-eslint/typescript-estree@5.62.0
    node_modules/@typescript-eslint/typescript-estree
      @typescript-eslint/typescript-estree@"5.62.0" from @typescript-eslint/parser@5.62.0
      node_modules/@typescript-eslint/parser
        dev @typescript-eslint/parser@"^5.3.1" from the root project
        peer @typescript-eslint/parser@"^5.0.0" from @typescript-eslint/eslint-plugin@5.62.0
        node_modules/@typescript-eslint/eslint-plugin
          dev @typescript-eslint/eslint-plugin@"^5.3.0" from the root project
      @typescript-eslint/typescript-estree@"5.62.0" from @typescript-eslint/type-utils@5.62.0
      node_modules/@typescript-eslint/type-utils
        @typescript-eslint/type-utils@"5.62.0" from @typescript-eslint/eslint-plugin@5.62.0
        node_modules/@typescript-eslint/eslint-plugin
          dev @typescript-eslint/eslint-plugin@"^5.3.0" from the root project
      @typescript-eslint/typescript-estree@"5.62.0" from @typescript-eslint/utils@5.62.0
      node_modules/@typescript-eslint/utils
        @typescript-eslint/utils@"5.62.0" from @typescript-eslint/eslint-plugin@5.62.0
        node_modules/@typescript-eslint/eslint-plugin
          dev @typescript-eslint/eslint-plugin@"^5.3.0" from the root project
        @typescript-eslint/utils@"5.62.0" from @typescript-eslint/type-utils@5.62.0
        node_modules/@typescript-eslint/type-utils
          @typescript-eslint/type-utils@"5.62.0" from @typescript-eslint/eslint-plugin@5.62.0
          node_modules/@typescript-eslint/eslint-plugin
            dev @typescript-eslint/eslint-plugin@"^5.3.0" from the root project

Could not resolve dependency:
peer typescript@"^2.7 || ^3" from awesome-typescript-loader@5.2.1
node_modules/awesome-typescript-loader
  dev awesome-typescript-loader@"^5.2.1" from the root project

Conflicting peer dependency: typescript@3.9.10
node_modules/typescript
  peer typescript@"^2.7 || ^3" from awesome-typescript-loader@5.2.1
  node_modules/awesome-typescript-loader
    dev awesome-typescript-loader@"^5.2.1" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

問題描述

在解析 awesome-typescript-loader@5.2.1 依賴時，發(fā)現(xiàn)了以下依賴關(guān)系：

• 發(fā)現(xiàn) typescript@4.9.5，位于 node_modules/typescript。
  • 來自根項目的 dev typescript@"^4.4.4"。
  • 來自 ts-loader@9.4.4 的 peer typescript@"*"。
  • 來自根項目的 dev ts-loader@"^9.2.6"。
  • 來自 tsutils@3.21.0 的 peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"。
• 發(fā)現(xiàn) typescript@3.9.10，位于 node_modules/typescript。
  • 來自 awesome-typescript-loader@5.2.1 的 peer typescript@"^2.7 || ^3"。

由于這兩個版本的 typescript 存在沖突，導(dǎo)致依賴解析失敗。

問題分析

通過上面的錯信息我們已經(jīng)了解到可以使用 --force 或 --legacy-peer-deps 選項來嘗試重新解析依賴。這樣可能會接受不正確的依賴解析，但也可能導(dǎo)致破損的依賴。
另一種解決方法是嘗試修復(fù)上游的依賴沖突。這可能需要手動調(diào)整項目的依賴配置，以確保所有依賴的版本能夠協(xié)調(diào)工作。
根據(jù)日志,問題是 awesome-typescript-loader 的 peerDependencies 中指定了對 typescript 的版本依賴是 "^2.7 || ^3",但項目中實際安裝的 typescript 版本是 4.9.5,高于指定的范圍,因此產(chǎn)生沖突。

解決方案

有幾種解決方法:

1. 升級 awesome-typescript-loader 到最新版本,它移除了對 typescript 版本的硬性限制,可以兼容 typescript 4.x

npm install awesome-typescript-loader@latest

2. 降級項目中 typescript 版本到 3.x 來滿足 awesome-typescript-loader 的 peerDependencies

npm install typescript@3 --save-dev

3. 使用 --legacy-peer-deps 參數(shù)強制安裝,忽略 peerDependencies 不兼容問題

npm install awesome-typescript-loader --legacy-peer-deps

4. 如果是通過 yarn 安裝,可以使用 yarn resolution 強制使用 typescript 4.x

yarn resolution:use-native typescript@4.x  

建議使用方法 1,升級到最新版本的 awesome-typescript-loader。?

方法 2 也可以,但會失去 typescript 4.x 的一些新特性。?

方法 3 可以解決安裝問題,但可能會引發(fā)實際運行時的不兼容問題。???

所以綜合來說,升級 awesome-typescript-loader 是更好的長期解決方案。

結(jié)論

依賴沖突是開發(fā)過程中常見的問題，解決起來可能需要一些時間和耐心。在解決依賴沖突問題時，需要注意官方文檔、社區(qū)討論以及類似問題的解決方法，以便找到最合適的解決方案。

希望這篇記錄能夠?qū)ζ渌_發(fā)者在遇到類似問題時提供一些幫助和指導(dǎo)。如果你也遇到了類似的問題，歡迎分享你的解決方法和經(jīng)驗！