解决 npm 依赖冲突报错记录

最近在使用 npm 安装项目依赖时，遇到了一个关于依赖冲突的问题，特此记录一下解决过程。

报错内容如下

linux 复制代码

# npm resolution error report

While resolving: [email protected]
Found: [email protected]
node_modules/typescript
  dev typescript@"^4.4.4" from the root project
  peer typescript@"*" from [email protected]
  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 [email protected]
  node_modules/tsutils
    tsutils@"^3.21.0" from @typescript-eslint/[email protected]
    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/[email protected]
    node_modules/@typescript-eslint/type-utils
      @typescript-eslint/type-utils@"5.62.0" from @typescript-eslint/[email protected]
      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/[email protected]
    node_modules/@typescript-eslint/typescript-estree
      @typescript-eslint/typescript-estree@"5.62.0" from @typescript-eslint/[email protected]
      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/[email protected]
        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/[email protected]
      node_modules/@typescript-eslint/type-utils
        @typescript-eslint/type-utils@"5.62.0" from @typescript-eslint/[email protected]
        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/[email protected]
      node_modules/@typescript-eslint/utils
        @typescript-eslint/utils@"5.62.0" from @typescript-eslint/[email protected]
        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/[email protected]
        node_modules/@typescript-eslint/type-utils
          @typescript-eslint/type-utils@"5.62.0" from @typescript-eslint/[email protected]
          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 [email protected]
node_modules/awesome-typescript-loader
  dev awesome-typescript-loader@"^5.2.1" from the root project

Conflicting peer dependency: [email protected]
node_modules/typescript
  peer typescript@"^2.7 || ^3" from [email protected]
  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.

问题描述

在解析 [email protected] 依赖时，发现了以下依赖关系：

发现 [email protected]，位于 node_modules/typescript。
- 来自根项目的 dev typescript@"^4.4.4"。
- 来自 [email protected] 的 peer typescript@"*"。
- 来自根项目的 dev ts-loader@"^9.2.6"。
- 来自 [email protected] 的 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"。
发现 [email protected]，位于 node_modules/typescript。
- 来自 [email protected] 的 peer typescript@"^2.7 || ^3"。

由于这两个版本的 typescript 存在冲突，导致依赖解析失败。

##问题分析通过上面的错信息我们已经了解到可以使用 --force 或 --legacy-peer-deps 选项来尝试重新解析依赖。这样可能会接受不正确的依赖解析，但也可能导致破损的依赖。另一种解决方法是尝试修复上游的依赖冲突。这可能需要手动调整项目的依赖配置，以确保所有依赖的版本能够协调工作。根据日志,问题是 awesome-typescript-loader 的 peerDependencies 中指定了对 typescript 的版本依赖是 "^2.7 || ^3",但项目中实际安装的 typescript 版本是 4.9.5,高于指定的范围,因此产生冲突。

解决方案

有几种解决方法:

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

css 复制代码

npm install awesome-typescript-loader@latest

降级项目中 typescript 版本到 3.x 来满足 awesome-typescript-loader 的 peerDependencies

sql 复制代码

npm install typescript@3 --save-dev

使用 --legacy-peer-deps 参数强制安装,忽略 peerDependencies 不兼容问题

css 复制代码

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

如果是通过 yarn 安装,可以使用 yarn resolution 强制使用 typescript 4.x

perl 复制代码

yarn resolution:use-native [email protected]

建议使用方法 1,升级到最新版本的 awesome-typescript-loader。✅

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

方法 3 可以解决安装问题,但可能会引发实际运行时的不兼容问题。✅✅✅

所以综合来说,升级 awesome-typescript-loader 是更好的长期解决方案。

结论

依赖冲突是开发过程中常见的问题，解决起来可能需要一些时间和耐心。在解决依赖冲突问题时，需要注意官方文档、社区讨论以及类似问题的解决方法，以便找到最合适的解决方案。

希望这篇记录能够对其他开发者在遇到类似问题时提供一些帮助和指导。如果你也遇到了类似的问题，欢迎分享你的解决方法和经验！

报错处理While resolving: [email protected] Found: [email protected]

解决 npm 依赖冲突报错记录

问题描述

解决方案

结论