解决yarn.lock导致的依赖冲突问题
前言
今天拉下新项目代码,执行完yarn之后,发现webstorm提示报错
1 | Error: Plugin "react" was conflicted between "--config#overrides[0] » plugin:react/jsx-runtime" and "--config » eslint-config-react-app » /Users/dansroh/Documents/myProject/fe-drivers-admin/node_modules/eslint-config-react-app/base.js". |
解决思路
根据报错信息显示,插件react在两个依赖中产生了冲突,于是,我首先找到
yarn.lock
文件,然后看到yarn.lock中存在如下配置
1 | eslint-config-react-app@^7.0.1: |
分析原因
在这种配置下,yarn.lock配置显示以下的版本关系:
- eslint-config-react-app@^7.0.1 依赖于 eslint-plugin-react@^7.27.1
- eslint-plugin-react@^7.27.1 实际安装的版本是 7.34.2
- 另一个地方有 eslint-plugin-react@^7.34.2 实际安装的版本是 7.34.3
这意味着有两个地方要求 eslint-plugin-react,但它们指定的范围不同:
- eslint-config-react-app 需要 ^7.27.1,这包括 7.27.1 及更高版本,直到 7.x.x 的最新版本。
- 另一个地方需要 ^7.34.2,这包括 7.34.2 及更高版本,直到 7.x.x 的最新版本。
- 由于 ^7.27.1 和 ^7.34.2 都包含在 7.34.2 和 7.34.3 的范围内,Yarn 理论上可以只安装 7.34.3 这一版本来满足这两个依赖的要求。
然而,实际情况可能是:
- 如果 eslint-config-react-app 被锁定在 7.34.2 版本之前下载的某个版本,这会导致两个版本的共存。
- 或者有其他的子依赖也指定了不同的版本范围。
因此,如果你直接运行 yarn install,是有可能会出现两个版本的 eslint-plugin-react。也就导致了,在tsx文件中,eslint因为依赖冲突而报错
解决方法
我的解决方法是使用yarn upgrade eslint-plugin-react@^7.27.1
- 原理就是,它会更新 eslint-plugin-react 的版本并更新yarn.lock文件,以确保依赖关系的一致性。
- 会将所有依赖 eslint-plugin-react@^7.27.1 的包更新到最新符合这个版本范围的版本。
- Yarn 会重新生成 yarn.lock 文件,确保所有依赖都指向一个符合版本范围的最新版本,从而避免多个版本的重复安装。
其他方法
- 第一种:删除yarn.lock,重写执行yarn,重新生成yarn.lock
- 第二种:在 package.json 中使用 resolutions 来指定一个版本,确保所有依赖都使用相同的版本:
1
2
3
4
5{
"resolutions": {
"eslint-plugin-react": "7.34.3"
}
}
其他
在解决过程中,发现VS Code编辑器,在遇到这个冲突错误时,并不会报错,而是会在下方显示错误,没有webstorm那么明显。
所以,同事们用VS Code都是没有发现这个问题,而我这边疯狂报错==
- 标题: 解决yarn.lock导致的依赖冲突问题
- 作者: DansRoh
- 创建于 : 2024-07-09 00:00:00
- 更新于 : 2024-07-09 15:31:23
- 链接: https://blog.shinri.me/2024/07/09/38_yarn.lock导致的依赖冲突解决/
- 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论