解决 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,高于指定的范围,因此产生冲突。
解决方案
有几种解决方法:
- 升级 awesome-typescript-loader 到最新版本,它移除了对 typescript 版本的硬性限制,可以兼容 typescript 4.x
npm install awesome-typescript-loader@latest
- 降级项目中 typescript 版本到 3.x 来满足 awesome-typescript-loader 的 peerDependencies
npm install typescript@3 --save-dev
- 使用 --legacy-peer-deps 参数强制安装,忽略 peerDependencies 不兼容问题
npm install awesome-typescript-loader --legacy-peer-deps
- 如果是通过 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 是更好的长期解决方案。
结论
依赖冲突是开发过程中常见的问题，解决起来可能需要一些时间和耐心。在解决依赖冲突问题时，需要注意官方文档、社区讨论以及类似问题的解决方法，以便找到最合适的解决方案。
希望这篇记录能够对其他开发者在遇到类似问题时提供一些帮助和指导。如果你也遇到了类似的问题，欢迎分享你的解决方法和经验！
