Create-react-app - ERROR in Plugin "react" was conflicted between ".eslintrc.json" and "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?

Pembroke

Just out of curiosity - why are you strive to apply this config? Just to enhance developer IDE experience? Because it was stated multiply times on CRA docs, that most relevant way is to "extend" their ESLint config. And even this extension will affect only IDE highlighting, without any effects in terminal and runtime... I've faced same problem "ERROR in Plugin "react" was conflicted..." today, and after browsing possible workarounds just gave up in favor of using default CRA config. – Preachment

I am getting this error and none of these answers helped :( – Chadburn

@Chadburn see my answer https://mcmap.net/q/277755/-create-react-app-error-in-plugin-quot-react-quot-was-conflicted-between-quot-eslintrc-json-quot-and-quot-baseconfig-quot maybe this helps – Pembroke

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 v1:

npx yarn-deduplicate && yarn

yarn v3+:

yarn dedupe

pnpm:

pnpm dlx pnpm-deduplicate && pnpm i

pnpm v8.3.0+:

pnpm dedupe && pnpm i

Ardine

It throws an error: SyntaxError: Unknown token: { line: 3, col: 2, type: 'INVALID', value: undefined } 3:2 in lockfile – Chadburn

Also, if you're using a custom eslint config, be sure you have eslint and eslint-plugin-react in your dev deps. – Monthly

It worked for me too. i did npm i and the error is gone. But again when i try to make any changes in code, the error appears again. – Cassius

If you are using yarn 3, yarn dedupe will do the trick natively – Propman

Did not work for me. – Nacred

Thx, in my case problem occurs after updating CRA, because eslint-plugin-react used in last version of CRA was different from my config. So, to check if you are in the same case : yarn list eslint-plugin-react and then change in your package.json the version of eslint-plugin-react – Bodrogi

The pnpm command did the trick for me. Apparently my lock file was a mess. Thanks. – Showalter

try deleting lock file first. i had this issue after adding something to an older lock file – Fervency

I think you can do pnpm dedupe – Aegis

Looks like it does the job since v8.3.0! Will revise the answer. Thanks, @Rolf! :-) – Ardine

Command yarn dedupe (yarn dedupe v1.22.22) gives: "error The dedupe command isn't necessary. yarn install will already dedupe.". So, yarn install is fine for me. – Martine

Answer 2

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 .

Acrolein

Any idea why this is fixes it? Not my issue but don't like it when things are fixed by 'magic' – Queer

I really have no idea why . sorry ! – Acrolein

Answer 3

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

Colligan

Deleting .lock file did the trick for me, thanks! – Illsorted

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

Wastepaper

Answer 5

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

Voncile

Answer 6

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.

Marriage

actually seems to be the spirit of most upvoted answer on github.com/reactjs/reactjs.org/issues/4186 too - seems to be caused by a fresh clone, npm start. If you save package.json then all is good again (!) – Pentarchy

Answer 7

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.

Cindelyn

i'm using ^7.28.0 and ^4.3.0 , still it didn't work for me – Hurleigh

Answer 8

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

yarn install

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

Jeanett

Answer 9

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.

Laconism

In my case I simply needed to update eslint-plugin-react to the latest version. – Vicereine

Answer 10

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.

Daynadays

Answer 11

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

This link may help you more Click here

Sociability

Answer 12

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.

Fabrianne

Answer 13

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

Jaxartes

Thank you so much for this pointer, had to help someone on Windows. The eslint error showed also bot D:\users\matt… and D:\Users\Matt…. Moving the project into D:\test\project (all lowercase) did finally npm install! – Imprison

Answer 14

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

Comet

Answer 15

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

yarn add --dev [email protected] 

or

npm install --dev [email protected] 

Maybe this will help someone.

Wanyen

Answer 16

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

Grunenwald

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Xyster

Answer 17

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

Chardin

Answer 18

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

Infraction

I removed "react" from plugin and it seems to work. Any idea is this is a good or bad approach? – Surgeon

I had to use this for legacy messy projects that went through a lot of hands. Typically, no. Not a great practice. But use it if needed. – Infraction

Answer 19

I've had a similar issue with this in our PNPM powered monorepo. We had two Next.js projects with two identical .eslint.rc files and an identical set of dependencies for eslint, plugins and configs. One of them had the following issue:

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

I've tried everything (root was already true, ESLint package versions and plugin/config versions were locked and same across the board) and the only thing that worked in the end was to make sure that the two projects had the same Typescript dependency version locked to 4.9.5. One of the packages was on 4.8.4 and for some reason that was making ESLint go crazy.

Nacre

Answer 20

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.

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

Besotted

Answer 21

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

Rodman

Answer 22

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.

Eversion

Answer 23

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

Unconsidered

Answer 24

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

Facetiae

Answer 25

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://mcmap.net/q/281119/-eslint-plugin-quot-react-quot-was-conflicted-between

Lermontov

Answer 26

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

Roomer

Answer 27

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

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

Archeology

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Seta

I've explained this one a bit more here: https://mcmap.net/q/281120/-error-in-plugin-quot-react-quot-was-conflicted-between – Queer

Answer 28

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.

Kkt

Answer 29

The most common error is eslint and eslint-config-react-app versions. You need to update them npm update eslint npm update eslint-config-react-app

This link has a few other mitigations one could try, https://bobbyhadz.com/blog/react-error-plugin-react-was-conflicted-between-package-json-eslint-config-react-app

Tigon

Answer 30

You can try this, it worked for me

npm update eslint

Lagrange

There's a typo in there. nom – Daddylonglegs

Answer 31

I faced this issue today and resolved it by removing caret from the react-scripts

From

"react-scripts": "^5.0.1"

To

"react-scripts": "5.0.1"

Below are the steps I followed to resolve that.

1. Remove caret from react-scripts
2. Remove node_modules and package-lock.json/yarn.lock
3. Install the packages by npm install or yarn install

Github: https://github.com/facebook/create-react-app/issues/11825#issuecomment-1620499330

Treiber

Answer 32

For me:

1. Delete all folder of node_modules

2. Delete lock file (yarn.lock or package.lock.json)

Then yarn install or npm install without seeing this issue again.

Rojo

Answer 33

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.

Pembroke

Answer 34

Open the package.json and type ctrl + s and it disappears.

Much

Answer 35

DISABLE_ESLINT_PLUGIN = true

set this in your .env file for react app. it solves the issue

Tenancy