报错处理While resolving: awesome-typescript-loader@5.2.1 Found: typescript@4.9.5

解决 npm 依赖冲突报错记录

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

报错内容如下

# 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 依赖时，发现了以下依赖关系：

• 发现 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"。
• 发现 typescript@3.9.10，位于 node_modules/typescript。
  • 来自 awesome-typescript-loader@5.2.1 的 peer typescript@"^2.7 || ^3"。

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

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

解决方案

有几种解决方法:

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 参数强制安装,忽略 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 可以解决安装问题,但可能会引发实际运行时的不兼容问题。✅✅✅

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

结论

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

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

这篇好文章是转载于：学新通技术网