如何强制react-scripts使用自身node_modules中的eslint依赖？

以下是几个可行的方案，既能保留主项目的eslint@7.5.0，又能让react-scripts使用自身依赖的eslint@5.16.0，无需依赖SKIP_PREFLIGHT_CHECK=true：

方案1：用Yarn Resolutions强制隔离版本 #

在项目根目录的package.json中添加resolutions字段，精准锁定react-scripts依赖的eslint版本，Yarn会在安装时为react-scripts单独维护这个版本，不会和主项目的eslint版本冲突：

{
  "private": true,
  "workspaces": ["packages/*"],
  "dependencies": {
    "eslint": "^7.5.0"
  },
  "resolutions": {
    "react-scripts/eslint": "^5.16.0"
  }
}

添加完成后执行yarn install重新安装依赖即可，Yarn会自动处理依赖树的隔离。

方案2：在CRA子项目中单独声明ESLint版本 #

如果你的项目是多workspace结构，直接在CRA初始化的子项目package.json中单独添加eslint@5.16.0作为依赖，Yarn Workspaces会为该子项目单独安装这个版本，避免和根项目的高版本ESLint冲突：

// 示例：packages/cra-app/package.json
{
  "name": "cra-app",
  "dependencies": {
    "react-scripts": "4.0.3", // 你的react-scripts版本
    "eslint": "^5.16.0"
  }
}

执行yarn install后，子项目会优先使用自身安装的eslint@5.16.0，根项目保持使用7.5.0，预检查报错会自动消失。

方案3：Eject后修改ESLint加载路径（不推荐） #

如果前两个方案不适用，可考虑eject CRA项目（不可逆操作），修改内部加载ESLint的逻辑，强制react-scripts使用自身依赖的版本：

1. 执行yarn eject导出CRA配置文件
2. 在 ejected 后的scripts/utils/verifyTypeScriptSetup.js或scripts/build.js等文件中，找到引入ESLint的代码，将加载路径改为：

const eslint = require(require.resolve('eslint', { paths: [require.resolve('react-scripts')] }));

这样会强制加载react-scripts自身node_modules中的ESLint版本，而非项目根目录的版本。

注意：eject后无法再接收react-scripts的官方更新，仅作为最后备选方案。

内容的提问来源于stack exchange，提问作者Thomas Soos