堆栈内存溢出
  繁体   English   中英

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

[英]Create-react-app - ERROR in Plugin "react" was conflicted between ".eslintrc.json" and "BaseConfig"

 原文  2021-12-22 13:18:22  7   28    reactjs/ eslint/ create-react-app

问题描述

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

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

我的 eslint 配置是：

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

任何解决方案/修复？

28 个解决方案

解决方案1
 13  2022-03-22 22:36:13

问题：

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

解决方案：

避免像这里建议的那样删除.lock文件（它的存在是有原因的）。 相反，删除其条目，然后重新安装。

npm ：

npm dedupe && npm i

纱线：

npx yarn-deduplicate && yarn

解决方案2
 10  2021-12-22 15:27:49

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

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

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

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

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

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

解决方案3
 4  2022-01-20 17:40:21

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

解决方案4
 4  2022-03-23 09:45:19

我刚刚运行了npm install --dev eslint-config-react-app命令，错误就消失了。 也使用 --include --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

解决方案5
 3  2022-04-16 21:58:32

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

解决方案6
 2  2022-01-06 14:41:06

我认为这是因为没有更新的 eslint。 只需将 eslint 版本从 package.json 中的 7.0.0 更改为 8.0.0 对我有用，或者您使用 ZBB30E85411B56DF41296726AB445DCF 在 cli 中更新

解决方案7
 2  2022-10-10 15:25:52

从 package.json 我删除了：

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

然后，我用npm start重新启动了服务器，我的网络应用程序再次运行。

希望能帮到你

解决方案8
 1  2022-01-05 17:20:57

我只是尝试在我的项目（与 CRA 5.0.0 一起使用）中使用您的配置，但没有收到此错误。 我认为问题在于您没有更新一个或几个与 eslint 相关的软件包。 您可以尝试更新它们：

yarn add -D \
eslint@^8.6.0 \
@typescript-eslint/eslint-plugin@^5.9.0 \
@typescript-eslint/parser@^5.9.0 \
eslint-plugin-react@^7.28.0 \
eslint-config-react@^1.1.7 \
eslint-config-airbnb@^19.0.4

或npm install而不是yarn add

解决方案9
 1  2022-02-26 16:43:27

我刚刚将eslint-config-react-app从版本7.0.0降级到6.0.0 ：

yarn add --dev eslint-config-react-app@6.0.0

或者

npm install --dev eslint-config-react-app@6.0.0

也许这会对某人有所帮助。

解决方案10
 1  2022-03-29 13:59:54

对我来说，更新后它起作用了

"eslint-plugin-react": "7.29.4",
"eslint-plugin-jsx-a11y": "6.5.1"

删除package-lock.json和node_modules并重新安装 package。

解决方案11
 1  2022-04-16 10:21:56

只需将 eslint-plugin-react 从版本 7.28.x 更新到 7.29.x 对我有用

解决方案12
 1  2022-04-29 22:29:41

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

解决方案13
 1  2022-05-16 15:33:07

如果使用 yarn，请删除您的yarn.lock并运行：

yarn install

这将重建 .lock 文件，错误将 go 消失。

解决方案14
 1  2022-05-30 06:33:30

我能够通过使用环境变量来解决这个问题。

我将 eslint 安装为开发依赖项（以及我使用的所有其他插件）。

要让您的代码在开发中进行 lint，但不会失败，请将其添加到 your.env.development： ESLINT_NO_DEV_ERRORS = true

要在生产版本中完全禁用 eslint，请将其添加到 your.env.production： DISABLE_ESLINT_PLUGIN = true

解决方案15
 0  2022-02-01 19:51:37

你用什么终端？ 我不推荐 Windows PowerShell。 使用 PowerShell 新版本可以正常工作。

看图片 Powershell 我推荐

解决方案16
 0  2022-02-27 19:15:59

今天我遇到了这个问题，在我运行审计修复后——强制 npm 启动没有用，但我收到了一条可爱的长消息，解释了这些步骤以及背后的原因。 我发现它很有帮助并解决了我的问题。

项目依赖树可能有问题。 这可能不是 Create React App 中的错误，而是您需要在本地修复的错误。

Create React App 提供的 react-scripts package 需要依赖：

“eslint”：“5.6.0”

不要尝试手动安装：您的 package 管理器会自动安装。 但是，在树的较高位置检测到不同版本的 eslint：

C:\Users\rohad\Desktop\project\node_modules\eslint（版本：8.10.0）

众所周知，手动安装不兼容的版本会导致难以调试的问题。

如果您希望忽略此检查，请将 SKIP_PREFLIGHT_CHECK=true 添加到项目中的 .env 文件中。 这将永久禁用此消息，但您可能会遇到其他问题。

要修复依赖关系树，请尝试按确切顺序执行以下步骤：

  1. 删除项目文件夹中的 package-lock.json（不是 package.json。）和/或 yarn.lock。
  2. 删除项目文件夹中的 node_modules。
  3. 从项目文件夹中 package.json 文件中的依赖项和/或 devDependencies 中删除“eslint”。
  4. 运行 npm install 或 yarn，具体取决于您使用的 package 管理器。

在大多数情况下，这应该足以解决问题。 如果这没有帮助，您可以尝试其他一些方法：

  1. 如果您使用 npm，请安装 yarn ( http://yarnpkg.com/ ) 并用它重复上述步骤。 这可能会有所帮助，因为 npm 已知 package 提升问题，这些问题可能会在未来的版本中得到解决。

  2. 检查 C:\Users\rohad\Desktop\project\node_modules\eslint 是否在您的项目目录之外。 例如，您可能不小心在主文件夹中安装了一些东西。

  3. 尝试在项目文件夹中运行 npm ls eslint。 这将告诉您哪些其他 package（除了预期的反应脚本）安装了 eslint。

如果没有其他帮助，请将 SKIP_PREFLIGHT_CHECK=true 添加到项目中的 .env 文件中。 如果您仍然想继续，这将永久禁用此预检检查。

PS 我们知道这条信息很长，但请阅读上面的步骤：-) 我们希望它们对您有所帮助！

解决方案17
 0  2022-03-02 15:30:27

就我而言，一切都更新到了最新版本，但我仍然遇到同样的错误。

删除锁定文件后，它开始工作

解决方案18
 0  2022-03-29 20:54:17

我遇到了这个问题，因为我在.eslintrc.yml和package.json中都有重复且不一致的声明。 似乎更新到 CRA 5.0 在 package.json 中添加了以下内容：

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

奇怪的。

解决方案19
 0  2022-04-11 07:56:29

我最近所做的并且 100% 有效的是创建一个新的 reat-app 项目（使用 CRA 5+），并将所有文件和配置移动到该新文件夹中。

解决方案20
 0  2022-05-20 20:45:05

这是对我有用的解决方案。

仅删除锁定文件可能对您不起作用。 你只需要从 eslint 中删除一些包。

所以这是我在 package.json 中的开发依赖项列表，它导致了同样的错误。

"devDependencies": {
    "@babel/eslint-parser": "7.17.0",
    "@babel/preset-react": "7.16.7",
    "eslint": "8.14.0",
    "eslint-config-airbnb": "18.2.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-html": "6.2.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsdoc": "39.2.8",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "7.29.4",
    "eslint-plugin-react-hooks": "4.4.0",
    "eslint-plugin-testing-library": "5.3.1",
    "husky": "7.0.4",
    "lint-staged": "12.4.0",
    "prettier": "2.6.2"
  }

在删除不需要的之后，这里是对我有用的依赖项列表

"devDependencies": {
    "@babel/eslint-parser": "7.17.0",
    "@babel/preset-react": "7.16.7",
    "eslint": "8.14.0",
    "eslint-config-airbnb": "18.2.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-html": "^6.2.0",
    "eslint-plugin-jsdoc": "^39.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "husky": "7.0.4",
    "lint-staged": "12.4.0",
    "prettier": "2.6.2"
  }
  • 在开发依赖项中替换这些。
  • 删除锁定文件和 node_modules
  • 再次运行 yarn/npm install

祝你好运

解决方案21
 0  2022-05-24 08:24:47

在部署到 Vercel 时，我一直遇到这个编译错误。 您可以通过删除 .eslintrc 文件来解决问题，然后从 package.json 中删除此部分： "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] },

解决方案22
 0  2022-05-26 05:04:32

尝试了很多解决方案，但最后，在 CRA 中禁用 ESLint 为我解决了这个问题。 无论如何，我在 IDE 中使用 ESLint，所以那里也不需要它。

这个其他线程有帮助： https://stackoverflow.com/a/70830899/5613884

解决方案23
 0  2022-07-25 07:05:40

我正在使用 eslint-config-import 这对我造成了同样的问题，只需将其删除，一切都会正常工作。 所以我认为（react/jsx-runtime）可能是问题的原因

解决方案24
 0  2022-09-08 19:36:51

当我在 .eslintrc.JSON 文件中添加root: true时，它对我来说很好。

此链接可能对您有更多帮助点击这里

解决方案25
 0  2022-09-10 06:03:11

这不是一个大错误，您只需要运行此命令npm install --prefer-dedupe或您也可以运行此命令npm config set prefer-dedupe true并且您的错误将得到解决。 您可能正在考虑prefer这只是为了版本。 你也可以像这样运行npm install dedupe它会安装新版本好吧！

我希望您在此答案后解决了您的错误。

解决方案26
 0  2022-10-06 22:47:32

"plugin:react/recommended" and/or "plugin:react/jsx-runtime" from "extends"应该可以修复它。

解决方案27
 0  2022-10-13 13:35:38

我尝试按照@glenn-mohammad 的建议运行npx yarn-deduplicate && yarn ，但我只得到 SyntaxError。 如果您使用 yarn 2，请尝试运行

yarn dedupe

有关文档，请参阅https://yarnpkg.com/cli/dedupe 。

我第一次运行它时，我在所有包上运行它，它导致了 babel 的新错误。 如果您遇到这种情况，请尝试只在有问题的包上运行它。

解决方案28
 0  2022-10-18 16:33:39

我面临的问题有点不同，但我会在这里发布这个答案，因为谷歌搜索我的问题会将我带到这个页面：

简短回答：

如果项目在 .net 项目中，请注意文件夹结构中的大小写差异。

长答案

设置：

我们有一个使用托管在 .net 核心项目中的 create react app 的 React 应用程序。 因此，当第一次运行项目构建完成时，visual studio 运行 npm install，然后运行 npm start。 页面打开并抛出错误

错误：

[eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app » C:\test folder\New folder\src\WatchCasing\ClientApp\node_modules\eslint-config-react-app\base.js" and "BaseConfig » C:\test folder\New folder\src\watchCasing\ClientApp\node_modules\eslint-config-react-app\base.js".

看“watchCasing”文件夹名字不一样，一个是WatchCasing，一个是watchCasing。 在我阅读这个 github 答案之前，我显然错过了这个大小写差异： github answer

原因及解决方法：

问题的根本原因是解决方案文件 (.sln) 的大小写错误（因为有人做了不正确的重命名）但项目构建良好，因为 Windows 将文件视为不区分大小写。

通过修复解决方案文件中的大小写以匹配项目部分中实际文件夹的大小写，问题得以解决。

Project("{project-guid}") = "project.name", "watchCasing\project.name.csproj", "{different-guid}"

结束项目

解决方案29
 -1  2022-07-30 05:31:47

使用正确的大写从 cd in from 对我有用。

IE 如果真实路径是 /Documents/Websites/EXAMPLE/ex1 则不要使用 /Documents/Websites/example/ex1 cd in

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 插件“react”在“.eslintrc.js”和“BaseConfig”之间发生冲突 插件“react”中的错误在 部署 React 应用程序时出错，它一直在说 << Plugin "react" was conflicted between "package.json » eslint-config-react-app » >> 插件“react”在“package.json”之间发生冲突 插件“react”在“package.json » eslint-config-react-app 之间发生冲突 创建反应应用程序错误 错误：无法加载在“.eslintrc”中声明的解析器“babel-eslint”：在 create-react-app 中找不到模块“babel-eslint” ESLint：插件“反应”在两者之间发生冲突 使用 create-react-app 命令反应错误 create-react-app完整性错误窗口
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM