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

Question

After updating to CRA 5.0.0, I got this error on compilation process:

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

My eslint configuration is:

{
    "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": {...}
}

Any solutions/fixes?

Answer 1

The problem :

eslint-plugin-react version in your project's dependency is "different" from the one in eslint-config-react-app package's dependency, hence "conflicting".

The solution :

Avoid deleting the .lock file as many suggested here ( it's there for a reason ). Instead, dedupe its entries and then re-install.

npm :

npm dedupe && npm i

yarn :

npx yarn-deduplicate && yarn

Answer 2

Well, this seems to be related to one of the following issues.

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

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

What you can try is the following (if the first one does not work, try the second one, if you are using yarn):

• First option, delete your.lock (at least seems to fix the issue for yarn) file as suggested here https://github.com/yannickcr/eslint-plugin-react/issues/3128#issuecomment-965559013
• Add pnpFallbackMode: all to .yarnrc.yml file, if you are using yarn, as explained here https://github.com/facebook/create-react-app/issues/10463#issuecomment-997378138

In addition, take a look the CRA release notes to check if some action is required, especially the part about "Migrating from 4.0.x to 5.0.0" , you may need to update react-scripts as well.

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

Answer 3

This probably won't help OP, but in my case, I'd updated my react app to MUI 5 and eslint from ^7.32.0 to ^8.7.0 but I forgot to upgrade eslint-plugin-react and eslint-plugin-react-hooks and the above error was happening on file change on reload. Upgrading them to ^7.28.0 and ^4.3.0 respectively fixed my problem.

Answer 4

I just ran the npm install --dev eslint-config-react-app command and the error is gone. Also use --include=dev instead of --dev .

also install dev dependencies with below command:

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

Then create a file named .eslintrc.json with following contents in the root folder of your project:

{
  "extends": "react-app"
}

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

Answer 5

What solved this for me was making sure that the path I cd into from the terminal has the same exact capitalization as the real path.

Answer 6

I think it's because of not an updated eslint. Just changing the eslint version to 8.0.0 from 7.0.0 in your package.json worked for me or you update in your cli using npm.

Answer 7

from package.json I removed:

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

Then, I restarted the server with npm start and my web app is working again.

Hope it can help

Answer 8

I just tried to use your config in my project (which is working with CRA 5.0.0) and didn't receive this error. I think the problem is that you didn't update one or several eslint-related packages. You can try to update them:

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

or npm install instead of yarn add if you are using npm

Answer 9

I've just downgraded eslint-config-react-app from version 7.0.0 to 6.0.0 :

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

or

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

Maybe this will help someone.

Answer 10

For me it worked after updating

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

removing package-lock.json and node_modules and reinstalling the package.

Answer 11

Simply updating eslint-plugin-react from version 7.28.x to 7.29.x worked for me

Answer 12

Before trying the previous responses. just open your package.json file and save it by Cntrl + S and run your app again it worked for me.

Answer 13

If using yarn, delete your yarn.lock and run:

yarn install

This will rebuild the.lock file and the error will go away.

Answer 14

I was able to fix this issue by the use of env variables.

I installed eslint as a dev-dependency (as well all any other plugins you that i use).

To get your code to lint, but not fail, in development, add this to your.env.development: ESLINT_NO_DEV_ERRORS = true

To completely disable eslint on a production build, add this to your.env.production: DISABLE_ESLINT_PLUGIN = true

Answer 15

What's terminal do you use? I don't recommend Windows PowerShell. Use the PowerShell new version and will works fine.

See the image of Powershell I recommended

Answer 16

Today i ran into the problem and after i ran an audit fix--force the npm start didnt work but i got a lovely long message which explains the steps and also the reason behind this. I found it helpful and fixed my problem.

There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"eslint": "5.6.0"

Don't try to install it manually: your package manager does it automatically. However, a different version of eslint was detected higher up in the tree:

C:\Users\rohad\Desktop\project\node_modules\eslint (version: 8.10.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an.env file in your project. That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json.) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem. If this has not helped, there are a few other things you can try:

5. If you used npm, install yarn ( http://yarnpkg.com/ ) and repeat the above steps with it instead. This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if C:\Users\rohad\Desktop\project\node_modules\eslint is outside your project directory. For example, you might have accidentally installed something in your home folder.

7. Try running npm ls eslint in your project folder. This will tell you which other package (apart from the expected react-scripts) installed eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an.env file in your project. That would permanently disable this preflight check in case you want to proceed anyway.

PS We know this message is long but please read the steps above:-) We hope you find them helpful!

Answer 17

In my case, everything was updated to the latest version, but still I got the same error.

After I deleted the lock file it started working

Answer 18

I got this issue because I got duplicate and not coherent declarations in both .eslintrc.yml and package.json . It seems that updating to CRA 5.0 added back in package.json the following:

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

Strange tbh.

Answer 19

What I recently did and it works 100% is to create a new reat-app project (using CRA 5+), and move all the files and configurations inside that new folder.

Answer 20

This is the solution that worked for me.

Removing the lock file only may not work for you. You just need to remove some of the packages from eslint.

So here is my list of dev dependencies in package.json which was causing the same error.

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

and after removing which were not needed, here is the list of dependencies which worked for me

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

• Replace these in dev dependencies.
• Remove the lock file and node_modules
• run yarn/npm install again

good luck

Answer 21

I kept running into this compilation error while deploying to Vercel. You can solve the issue by deleting.eslintrc file and then remove this part from your package.json: "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] },

Answer 22

Tried a lot of solutions, but in the end, disabling ESLint inside CRA solved it for me. I use ESLint in the IDE anyway, so don't need it there as well.

This other thread helped: https://stackoverflow.com/a/70830899/5613884

Answer 23

I was using eslint-config-import which was causing the same problem with me, just remove it and everything going to work fine. so I think that (react/jsx-runtime) may the cause of the problem

Answer 24

It works fine for me when I add root: true inside the.eslintrc.JSON file.

This link may help you more Click here

Answer 25

This is not a big error you just need to run this command npm install --prefer-dedupe or You can also run this command npm config set prefer-dedupe true and your error will be solved. You might be thinking about prefer this is nothing this is just for the version. you can run like this also npm install dedupe by default it will install the new version okay!

I hope you solved your error after this answer.

Answer 26

Removing "plugin:react/recommended" and/or "plugin:react/jsx-runtime" from "extends" should fix it.

Answer 27

I tried running npx yarn-deduplicate && yarn as suggested by @glenn-mohammad, put I only got SyntaxError. If you use yarn 2, try instead to run

yarn dedupe

See https://yarnpkg.com/cli/dedupe for docs.

First time I ran it, I ran it on all packages, and it caused a new error with babel. If that happens to you, try instead to run it only on the packages with issues.

Answer 28

The issue I was facing is a bit different but I am going to post this answer here because the google search for my issue takes me to this page:

Short answer:

Watch for casing differences in the folder structure, if the project is inside a .net project.

Long answer

The set up:

We have a react app using create react app hosted inside a .net core project. So when a run project build is done for the first time visual studio runs npm install and then npm start. The page opens up and an error is thrown

The error:

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

Look at the "watchCasing" folder name its different, one is WatchCasing and the other is watchCasing. I obviously missed this casing difference until I read this github answer: github answer

Cause and solution:

Root cause of the issue was that the solution file(.sln) had the wrong casing(because some one did an improper rename) but the project built fine since windows treats file as case insensitive.

The problem was solved by fixing the casing in the solution file to match the casing of the actual folder in the project section.

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

EndProject

Answer 29

Using the correct capitalization to cd in from is what worked for me.

IE If real path is /Documents/Websites/EXAMPLE/ex1 then don't cd in with /Documents/Websites/example/ex1