Create-react-app - 插件“react”中的错误在“.eslintrc.json”和“BaseConfig”之间发生冲突

Question

更新到 CRA 5.0.0 后，我在编译过程中遇到此错误：

\n

ERROR in Plugin "react" was conflicted between ".eslintrc.json" and "BaseConfig \xc2\xbb "..\\react-app\\node_modules\\eslint-config-react-app\\base.js".\n

\n

我的 eslint 配置是：

\n

{\n    "env": {\n        "browser": true,\n        "es2021": true\n    },\n    "extends": [\n        "plugin:react/recommended",\n        "airbnb",\n        "plugin:react/jsx-runtime"\n    ],\n    "parser": "@typescript-eslint/parser",\n    "parserOptions": {\n        "ecmaFeatures": {\n            "jsx": true\n        },\n        "ecmaVersion": 12,\n        "sourceType": "module"\n    },\n    "plugins": [\n        "react",\n        "@typescript-eslint"\n    ],\n    "rules": {...}\n}\n

\n

有任何解决方案/修复吗？

\n

Answer 1

问题：

eslint-plugin-reacteslint-config-react-app项目依赖项中的版本与包依赖项中的版本“不同” ，因此“冲突”。

解决方案：

.lock避免按照此处建议的方式删除该文件（它的存在是有原因的）。相反，请删除其条目的重复数据，然后重新安装。

节点管理：

npm dedupe && npm i

纱线 v1：

npx yarn-deduplicate && yarn

纱线 v3+：

yarn dedupe

PNPM：

pnpm dlx pnpm-deduplicate && pnpm i

pnpm v8.3.0+：

pnpm dedupe && pnpm i

Answer 2

嗯，这似乎与以下问题之一有关。

https://github.com/yannickcr/eslint-plugin-react/issues/3128

https://github.com/facebook/create-react-app/issues/10463

您可以尝试以下方法（如果第一个不起作用，如果您使用的是纱线，请尝试第二个）：

• 第一个选项，按照此处的建议删除 .lock （至少似乎解决了纱线问题）文件https://github.com/yannickcr/eslint-plugin-react/issues/3128#issuecomment-965559013
• 如果您使用的是纱线，请添加pnpFallbackMode: all到.yarnrc.yml文件，如下所述https://github.com/facebook/create-react-app/issues/10463#issuecomment-997378138

此外，请查看 CRA 发行说明以检查是否需要执行某些操作，尤其是有关“从 4.0.x 迁移到 5.0.0”react-scripts的部分，您可能也需要更新。

https://github.com/facebook/create-react-app/releases/tag/v5.0.0

Answer 3

在尝试之前的响应之前。只需打开您的package.json文件并保存它，Cntrl + S然后再次运行您的应用程序，它对我有用。

Answer 4

我刚刚运行了 npm install --dev eslint-config-react-app命令，错误就消失了。也可以使用--include=dev代替--dev.

还可以使用以下命令安装开发依赖项：

npm install --save-dev eslint-config-react-app eslint@^8.0.0

.eslintrc.json然后在项目的根文件夹中创建一个包含以下内容的文件：

{
  "extends": "react-app"
}

来源https://www.npmjs.com/package/eslint-config-react-app

Answer 5

我从 package.json 中删除了：

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }

然后，我重新启动了服务器，npm start我的网络应用程序又开始工作了。

希望它能有所帮助

Answer 6

对我来说解决这个问题的方法是确保我从终端进入的路径与实际路径具有相同的大小写。

Answer 7

这可能对OP没有帮助，但就我而言，我已将我的React应用程序更新到MUI 5并从 eslint更新^7.32.0到^8.7.0但我忘记升级eslint-plugin-react，eslint-plugin-react-hooks并且在重新加载时文件更改时发生上述错误。将它们升级到^7.28.0和^4.3.0分别解决了我的问题。