ERROR in Plugin "react" was conflicted between ".eslintrc.json" and "BaseConfig"

[enoh-barbu]

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?

[KBeDevel]

Not sure why, but I removed my yarn.lock file (I use Yarn berry) then I reinstalled the dependencies using yarn and the problem just disappeared

Workaround source

[marcoandre1]

As strange as it may sound, for me the error happens when I switch from PowerShell to Git Bash. To fix it, I must run twice npm start. First it will give me the error. I close the console, reopen it, tap npm start again and it works without errors.

[johannesleander]

My team and I were able to solve this issue by re-installing all dependencies and removing 'react' from the list of plugins passed to our .eslintrc.

    "plugins": [
-       "react",
        "@typescript-eslint"
    ],

[GauravBansal29]

removing this from package.json worked for me:

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

[aso1datov]

So what I noticed. After upgrading the react-scripts the eslint-config-react-app folder was created at the root level (./node_modules/eslint-config-react-app) and I have this error.

After updating some eslint plugins and parsers eslint-config-react-app moved to react-scripts folder (./node_modules/react-scripts/node_modules/eslint-config-react-app) and the error disappeared.

I was unable to determine which dependency exactly caused this but there is a list of those that I updated. Maybe this will help.

    "@typescript-eslint/eslint-plugin": "5.8.1",
    "@typescript-eslint/parser": "5.8.1",
    "eslint": "8.6.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-plugin-import": "2.25.4",
    "eslint-plugin-react": "7.28.0",
    "eslint-plugin-unicorn": "40.0.0",

[petrvecera]

Does anyone have a fix which would not affect the functionality? I know that we can get rid of the error by removing the plugins from the config but I don't think the eslint is gonna behave the same right?

Btw so far we were not been able to update any of our 6 big projects (all yarn workspaces/mono repos) to CRA 5.0.0 everything is plagued by insane errors which comes mostly from the packages, weird incompatibilities and typescript build errors ... Fixing one problem just lead to another and another... 😞

[eakl]

I have the same problem.

I removed this from package.json:

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

And I added react from eslint-plugin-react to .eslintrc.json

"plugins": [
    "react"
 ],

This cause the following error

> yarn build

Failed to compile.

Plugin "react" was conflicted between "./.eslintrc" and "BaseConfig » /Users/xxxx/xxx/project/web/node_modules/eslint-config-react-app/base.js".

[Visible-Radio]

Was having similar issues after updating react-scripts and many other packages in our project.
Through pure dumb luck I changed our .eslintrc.yml to this

env:
  browser: true
  es2021: true
extends:
#  - 'plugin:react/recommended'
  - react
  - airbnb
parserOptions:
  ecmaFeatures:
    jsx: true
  ecmaVersion: 12
  sourceType: module
plugins:
  - react
rules: {}

from this

env:
  browser: true
  es2021: true
extends:
  - 'plugin:react/recommended'  
  - airbnb
parserOptions:
  ecmaFeatures:
    jsx: true
  ecmaVersion: 12
  sourceType: module
plugins:
  - react
rules: {}

So far so good...

[stickoking]

Uninstall Eslint extension from VScode if you have it. Then run npm uninstall -g eslint, then run npm install -g eslint, reinstall eslint extension in VScode, close your terminal/VsCode and reopen and try again it builds for me now.

[NicolasRannou]

Deleting yarn.lock and generating a new one fixed it for me.

[finnmerlett]

I tried:

1. making sure plugin:react/recommended wasn't being extended
2. deleting yarn lock, node_modules and yarn .cache
3. ensuring no global eslint was installed
4. uninstalling vscode eslint extension
5. quitting vscode
6. restarting and reinstalling eslint extension
7. restarting again
8. running yarn
   -> still broken

For now I've just had to preface react-scripts start with DISABLE_ESLINT_PLUGIN=true

[PaulYork-GitHub]

I found a workaround\resolution for my particular case that I haven't come across whilst googling so adding it here to see if it helps anyone else.

On Windows, I was launching VSCode from Powershell using the command code .. Unfortunately, I had changed to my source directly by doing issuing a cd c:\source command and then entering code ., rather than what the directory was actually called, cd c:\Source.

Once I restarted VSCode after changing using the correct directory name and case, this issue that was being thrown by my React application disappeared!.

Apparently whilst the windows file system isn't case sensitive, the application and coding environment that depends on it is.

[brayanmf]

I am with the same problem, the funny thing is that when you save it from the package.json it executes the normal server but if I save it from a component it sends me the same error

[eakl]

I am with the same problem, the funny thing is that when you save it from the package.json it executes the normal server but if I save it from a component it sends me the same error

Exactly the same. I even tried to set the environment variable to disable eslint error on start. It doesn't work.

[BrickerZou]

now I removed this from package.json

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

this way is useful
but this closes the error prompt...

[kennethbigler]

I am with @finnmerlett in that nothing I tried succeeded until using DISABLE_ESLINT_PLUGIN=true on my npm run build.

My error:

> react-home@4.0.0 build
> react-scripts build

Creating an optimized production build...
(node:1790) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(Use `node --trace-deprecation ...` to show where the warning was created)
Failed to compile.

Plugin "@typescript-eslint" was conflicted between ".eslintrc.json" and ".eslintrc.json » ./node_modules/gts#overrides[0] » plugin:@typescript-eslint/recommended » ./configs/base".

https://github.com/kennethbigler/react-home/runs/4984838132?check_suite_focus=true
my eslint config:
https://github.com/kennethbigler/react-home/blob/main/.eslintrc.json

You will see it happens both locally and on CI

[jpaholik]

Similarly as @aso1datov I've also updated following packages and it works for me.

"@typescript-eslint/eslint-plugin": "5.10.2",
"@typescript-eslint/parser": "5.10.2",
"eslint": "8.8.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-prettier": "8.3.0",
"eslint-config-standard": "16.0.3",
"eslint-config-standard-react": "11.0.1",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-react": "7.28.0",
"eslint-plugin-react-hooks": "4.3.0",

[boahs]

My team and I were able to solve this issue by re-installing all dependencies and removing 'react' from the list of plugins passed to our .eslintrc.

    "plugins": [
-       "react",
        "@typescript-eslint"
    ],

This finally let me create a production build on my local using CRA. This issue was beyond frustrating - thanks for the suggestion.

Note: I went inside the Node_Modules directory =>
eslint dependency and removed the line in the code block quoted above.

[Lightning-Father]

I reproduce this same issue in my local. I fixed this issue by executing "npx eslint --init".

[derek-silva]

My issue was fixed by creating the react repository locally on my machine. I didn't notice I was on the OneDrive folder initially when creating the app.

Hope this helps someone!!!!

[mDep07]

As strange as it may sound, for me the error happens when I switch from PowerShell to Git Bash. To fix it, I must run twice npm start. First it will give me the error. I close the console, reopen it, tap npm start again and it works without errors.

Thanks, I tried closing the console and opening it again and it solved the problem... Another React project was done in the same console tab, I guess that's where the problem came from.

[Israel-Laguan]

Just in case, I solved it by removing all the eslint related packages and installing them again, this time it downloaded the correct version.

[nhanvu327]

I still experience this issue.

[enoh-barbu]

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.

[zyriab]

I had the same problem (Win10, VSCode, npm, CRA + TS) and it was a casing mismatch, like some other people had as well.
(Dev/apps/my-app/ instead of Dev/Apps/my-app/).
It's weird because I didn't have that until a few days ago when opening back my project after almost 1 month away from it. Even before updating the deps.

[rally25rs]

This error indicates that there are 2 copies of eslint-plugin-react being fed into ESLint.

I suspect that in my case the issue that react-scripts adds this plugin in the base config somewhere, but also I specify

      extends: [
        'plugin:react/jsx-runtime',
      ],

in my .eslintrc and I think react/jsx-runtime alsoadds or useseslint-config-react-appandeslint-plugin-react`.

This sometimes works fine, if there is only 1 copy of eslint-plugin-react in your node_modules directory (if they hoisted and are de-duplicated). Otherwise, eslint doesn't know which one to use.

If you are using Yarn modern (v2+) you can try to use

yarn info eslint-plugin-react -AR --dependents --virtuals

to try to diagnose if and why you have more than one copy of eslint-plugin-react

[ljharb]

If you're using CRA, you basically always have to eject to do anything meaningful, and this is the kind of issue you might see with react-scripts prior to ejecting.

[Spylak]

This issue appeared to me today while I was running npm run build.
Placing the project in C: on windows 10 resolved it and running the command from there resolved it.

[stefanatanasovmk]

I had the same problem, the issue was that when I cd to the directory where my React app is, I used small first letter of the directory, instead capital, as the directory is named. So the react had problem finding probably the base.js file or something.

[wp993080086]

ERROR in [eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app » D:\github\react-demo\react-cli\node_modules\eslint-config-react-app\base.js" and "BaseConfig » D:\gitHub\react-demo\react-cli\node_modules\eslint-config-react-app\base.js"

Will anyone solve this problem.

[CramerJ1470]

My team and I were able to solve this issue by re-installing all dependencies and removing 'react' from the list of plugins passed to our .eslintrc.

    "plugins": [
      "react",
        "@typescript-eslint"
    ],

i added it to my package.json and it worked as well thanks

[StankovskiA]

I had the same problem, the issue was that when I cd to the directory where my React app is, I used small first letter of the directory, instead capital, as the directory is named. So the react had problem finding probably the base.js file or something.

This was the problem for me, thanks!

[sqivea]

I had the same problem. I had a configured project with all dependencies being installed and I also had my configured .eslint.yaml, however I ran eslint --init (ignoring the fact I don't have to actually initialize my eslint config because it was already configured) and it prompted me with

• Need to install the following packages: @eslint/create-config
• Ok to proceed? (y)
  After I agreed eslint asked me to install needed dependencies, and in the end it generated its standard config, which I then replaced with the one I had from the beginning, but since that it is built without the error.

[SandmanL]

I solved this issue by upgrading dependencies like @aso1datov and @jpaholik did before me. Specifically, by upgrading the eslint-plugin-react dependency.

"eslint-plugin-react": "7.28.0"

[lawrencemauku]

Check your project path and ensure the cases in your foldres match since bash considers "/Documents" different from "/documents" hence the error or just open your project path on explorer for windows users, right click on the project name and open with your IED.

[LevapVeeskela]

when you install react-scripts, example last version such 5.0.1, its has dependencies with eslint-config-react-app => eslint-plugin-react and etc, so you don't need install several packages what conflit with exist in node_module in other package
also you can try remove dublicate from yarn.lock or package.lock:
npm dedupe && npm i
npx yarn-deduplicate && yarn
yarn dedupe

[jaroslav-kubalak]

If you are still facing this problem, my solution was to clone the repo to a new location, start over and the problem goes away. Hopefully it will work for you too, because I tried everything from this discussion and nothing really helped.

[mjsaijem07]

"extends": ["plugin:react/recommended", "prettier"], ----> "extends": ["prettier"],
["plugin:react/recommended" //removed

"plugins": ["react", "react-hooks", "import", "prettier"], ----> "plugins": ["react-hooks", "import", "prettier"],
"react" //removed

no problem ;)

[Zoot01]

removing this from package.json worked for me:

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

This should be the accepted answer.

[SachaG]

removing this from package.json worked for me:

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

This also worked for me, thanks!

[gersur]

This error indicates that there are 2 copies of eslint-plugin-react being fed into ESLint.
#11825 (comment)

This is the problem!

I override eslint-plugin-react using yarn, in package.json

  "resolutions": {
    "eslint-plugin-react": "^7.32.2"
  },

[akillablitz]

This error indicates that there are 2 copies of eslint-plugin-react being fed into ESLint.
#11825 (comment)

This is the problem!

I override eslint-plugin-react using yarn, in package.json

  "resolutions": {
    "eslint-plugin-react": "^7.32.2"
  },

Spot on... Yarn Classic...

yarn why eslint-plugin-react

[NishargShah]

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

[humbroll]

I removed followings from .eslintrc.json and it worked out;

• remove "plugin:react/recommended" from "extends"
• remove "react" from "plugins"

[umerfarooq1997]

Okay so this issue is finally solve by my own i see a lot of solutions but nothing work

so go to your package lock file remove all eslint also delete from package.josn and then delete your node module folder then install your eslint and then npm i this thing is 100% works.

[manthanv]

I am facing same issue but after changing node version 14 to 16.16.0 its work fine

[Saber1Y]

removing this from package.json worked for me:

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

Yes, it works.

[umerfarooq1997]

Simple solution of this is. Like there is new version of CRA gives built-in eslint so i simply remove all the eslint from package config and delete package.lock file and node module folder also then reinstall my eslint. So for me its work fine

[saqibtanveer786]

removing this from package.json worked for me:

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

I got this from above but is it ideal way to resolve this error ?