解决yarn.lock导致的依赖冲突问题

前言

今天拉下新项目代码，执行完yarn之后，发现webstorm提示报错

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中存在如下配置

eslint-config-react-app@^7.0.1:
  ...省略
  dependencies:
    eslint-plugin-react "^7.27.1"
    ...省略

eslint-plugin-react@^7.27.1:
  version "7.34.2"
  ...省略
  
eslint-plugin-react@^7.34.2:
  version "7.34.3"
  ...省略

分析原因

在这种配置下，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文件，以确保依赖关系的一致性。

1. 会将所有依赖 eslint-plugin-react@^7.27.1 的包更新到最新符合这个版本范围的版本。
2. Yarn 会重新生成 yarn.lock 文件，确保所有依赖都指向一个符合版本范围的最新版本，从而避免多个版本的重复安装。

其他方法

1. 第一种：删除yarn.lock，重写执行yarn，重新生成yarn.lock
2. 第二种：在 package.json 中使用 resolutions 来指定一个版本，确保所有依赖都使用相同的版本：

   {
     "resolutions": {
       "eslint-plugin-react": "7.34.3"
     }
   }

其他

在解决过程中，发现VS Code编辑器，在遇到这个冲突错误时，并不会报错，而是会在下方显示错误，没有webstorm那么明显。
所以，同事们用VS Code都是没有发现这个问题，而我这边疯狂报错==