eslint-config-react插件导致的conflicted冲突

2022年7月14日 • ... • ☕️ 2 min read

eslint一般配置一次就不怎么改了，除非插件升级导致了异常。所以确实遇到了异常：

ERROR in Plugin "react" was conflicted between ".eslintrc.js » eslint-config-airbnb » /.../node_modules/.pnpm/eslint-config-airbnb@19.0.4_ymsdurwr2nxw43jpluuuhbyayy/node_modules/eslint-config-airbnb/rules/react-a11y.js" and "BaseConfig » /.../node_modules/.pnpm/eslint-config-react-app@7.0.1_qfqppthtlygbnwmcpqraop7wzi/node_modules/eslint-config-react-app/base.js".

初看起来，是eslint-config-airbnb@19.0.4和eslint-config-react-app@7.0.1的某个插件版本不一致导致的，如果安装了两个，又同时声明了不同版本的依赖，确实可能导致这个冲突。查了一下

// eslint-config-airbnb
"devDependencies": {
  "eslint-plugin-react": "^7.30.0",
}
"peerDependencies": {
  "eslint-plugin-react": "^7.30.0",
},

// eslint-config-react-app
"dependencies": {
  "eslint-plugin-react": "^7.27.1",
}

一番折腾，单独安装包或者加solution都不管用，可以在运行命令的时候加DISABLE_ESLINT_PLUGIN=true，但是显然解决不了根本问题。最后看到lock文件里的版本依赖，发现了问题

pnpm-lock.yaml

/eslint-config-airbnb/19.0.4_ymsdurwr2nxw43jpluuuhbyayy:
    resolution: {integrity: sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==}
    engines: {node: ^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^7.32.0 || ^8.2.0
    dependencies:
      eslint: 8.17.0
      eslint-plugin-react: 7.30.0_eslint@8.17.0

/eslint-config-react-app/7.0.1_qfqppthtlygbnwmcpqraop7wzi:
    resolution: {integrity: sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      eslint: ^8.0.0
    dependencies:
      eslint: 8.18.0
      eslint-plugin-react: 7.30.0_eslint@8.18.0

虽然eslint-plugin-react都是7.30.0，但是依赖的eslint一个是8.17一个是8.18，那么pnpm会当成两个包（7.30.0eslint@8.17.0和7.30.0eslint@8.18.0），导致重复引用。

查找到某个projects里的依赖是eslint@8.5.0（这个版本不重要，因为依赖用的是^）。重新install一个eslint，版本都变为7.30.0_eslint@8.18.0，问题解决。

所以对于一些项目包导致的奇怪问题，要分析npm的依赖树。