创建react应用程序-插件“react”中的错误在“.eslintrc.json”和“BaseConfig”之间冲突

这个问题 :

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

解决方案 :

避免删除 .lock 按此处建议的数量归档( it's there for a reason )。相反,对其条目进行重复数据消除,然后重新安装。

npm :

npm dedupe && npm i

纱线v1 :

npx yarn-deduplicate && yarn

纱线v3+ :

yarn dedupe

pnpm :

pnpm dlx pnpm-deduplicate && pnpm i

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

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

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

你可以尝试以下方法(如果第一种方法不起作用,如果你使用的是纱线,请尝试第二种方法):

• 第一个选项,按照这里的建议删除你的.lock(至少似乎可以解决yarn的问题)文件 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

在尝试以前的响应之前。打开你的 package.json 文件并保存方式 Cntrl + S 再次运行你的应用程序,这对我很有效。

我刚刚跑了 npm install --dev eslint-config-react-app 命令,错误就消失了。也使用 --include=dev 而不是 --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

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

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

如果使用纱线,请删除您的 yarn.lock 并运行:

yarn install

这将重新生成.lock文件,错误将消失。

从package.json我删除了:

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

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

希望能有所帮助

我想这是因为没有更新eslint。只需在您的package.json中将eslint版本从7.0.0更改为8.0.0就可以了,或者您可以使用npm在cli中进行更新。

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

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

移除 package-lock.json 和 node_modules 并重新安装软件包。

当我添加时,它对我很有效 root: true 在.eslintrc.JSON文件中。

此链接可能会为您提供更多帮助 Click here

这不是一个大错误,您只需要运行此命令 npm install --prefer-dedupe 或者也可以运行此命令 npm config set prefer-dedupe true 你的错误就会得到解决。你可能在考虑 prefer 这不算什么,这只是版本。你也可以这样跑 npm install dedupe 默认情况下,它会安装新版本,好吗!

我希望你在回答完这个问题后解决了你的错误。

我只是试图在我的项目中使用您的配置(该项目正在使用CRA 5.0.0),但没有收到此错误。我认为问题在于您没有更新一个或多个与esint相关的包。您可以尝试更新它们:

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 如果您正在使用npm

我刚降级 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 

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

简单地将eslint-plugin-react从7.28.x版本更新到7.29.x对我来说很有效

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

我安装esint作为一个开发依赖项(以及我使用的所有其他插件)。

要使您的代码在开发中保持lint,但不会失败,请将其添加到.env.development中: ESLINT_NO_DEV_ERRORS=true

要在生产版本中完全禁用esint,请将其添加到.env.production中: DISABLE_ESLINT_PLUGIN=真

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

简短回答:

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

答案很长

设置:

我们有一个react应用程序,使用托管在.net核心项目中的create-rect应用程序。因此,当第一次完成运行项目构建时,visualstudio运行npm安装,然后运行npm启动。页面打开并引发错误

错误:

[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}"

结束项目

我在PNPM供电的单回购中也遇到过类似的问题。我们有两个Next.js项目,有两个相同的 .eslint.rc files 以及esint、插件和配置的一组相同的依赖项。其中一个问题如下:

ESLint: Plugin "@typescript-eslint" was conflicted between ".eslintrc.js#overrides[0]" and ".eslintrc.js#overrides[0] » eslint-config-airbnb-typescript 

我什么都试过了( root 已经是真的了,ESLint包版本和插件/配置版本被锁定,并且在所有方面都是相同的),并且最终唯一有效的是确保这两个项目具有相同的Typescript依赖版本 4.9.5 。其中一个包裹已打开 4.8.4 出于某种原因,这让ESLint变得疯狂。

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

项目依赖关系树可能存在问题。是的 可能不是Create React应用程序中的错误,而是您需要修复的问题 本地。

Create react App提供的react脚本包需要 依赖项:

“eslint”:“5.6.0”

不要尝试手动安装:由软件包管理器完成 自动地但是,检测到不同版本的esint 在树的高处:

C: \Users\rohad\Desktop\project\node_modules\slint(版本:8.10.0)

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

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

要修复依赖关系树,请尝试在 订单:

1. 删除项目文件夹中的package-lock.json(而不是package.json!)和/或yarn.lock。
2. 删除项目文件夹中的node_modules。
3. 从项目文件夹的package.json文件中的依赖项和/或devDependencies中删除“esint”。
4. 根据您使用的包管理器,运行npm-install或yarn。

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

5. 如果使用npm,请安装yarn( http://yarnpkg.com/ )并用它重复上述步骤。 这可能会有所帮助,因为npm在包装吊装方面存在已知问题,这些问题可能会在未来版本中得到解决。

6. 检查C:\Users\rohad\Desktop\project\node_modules\sint是否在项目目录之外。 例如,您可能不小心在主文件夹中安装了某些内容。

7. 请尝试在项目文件夹中运行npm ls esint。 这将告诉您哪个其他包(除了预期的react脚本)安装了esint。

如果没有其他帮助,请将SKIP_PREFLIGHT_CHECK=true添加到.env文件中 在您的项目中。这将永久禁用飞行前检查 以防您仍要继续。

附言:我们知道这条消息很长,但请阅读上面的步骤:-) 我们希望你觉得它们很有帮助!

在我的情况下,所有的东西都更新到了最新版本,但我仍然遇到了同样的错误。

在我删除锁定文件后,它开始工作

我遇到这个问题是因为我在这两个方面都有重复且不连贯的声明 .eslintrc.yml 和 package.json 。 似乎CRA 5.0的更新在package.json中添加了以下内容:

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

奇怪的tbh。

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

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

另一个线程有助于: https://stackoverflow.com/a/70830899/5613884

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

仅删除锁定文件可能不适用于您。您只需要从esint中删除一些包。

下面是我在package.json中列出的导致相同错误的dev依赖项。

"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
• 再次运行纱线/npm安装

祝你好运

我使用的是eslint-config导入,这也给我带来了同样的问题, 只要把它取下来,一切都会好起来的。 所以我认为(react/jsx运行时)可能是问题的原因

对我来说,使用正确的大写字母从中cd是有效的。

I.E.如果实际路径为/Documents/Websites/EXAMPLE/ex1 然后不要使用/Documents/Websites/example/ex1登录

正在删除 "plugin:react/recommended" and/or "plugin:react/jsx-runtime" from "extends" 应该修复它。

我试着跑步 npx yarn-deduplicate && yarn 正如@glenn mohammad所建议的那样,我只得到了SyntaxError。如果使用2号纱线,请尝试运行

yarn dedupe

看见 https://yarnpkg.com/cli/dedupe 用于文档。

我第一次运行它时,在所有包上都运行了它,这导致了babel的一个新错误。如果发生这种情况,请尝试只在有问题的包上运行它。

打开package.json并键入 ctrl + s 然后它就消失了。

最常见的错误是eslint和eslint-config-react应用程序版本。你需要更新它们 npm update eslint npm update eslint-config-react-app

这个链接还有一些其他可以尝试的缓解措施, https://bobbyhadz.com/blog/react-error-plugin-react-was-conflicted-between-package-json-eslint-config-react-app