create-react-app: ERROR in Plugin "react" was conflicted between ".eslintrc.json" and "BaseConfig"

removing this from package.json worked for me:

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

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

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

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.

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.

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

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

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.

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

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

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… 😞

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

For those still struggling with this and who have tried all the suggestions (like I had), explicitly stating the dependency in package.json with resolutions fixed it for me.

// package.json
"resolutions": {
    "react-scripts/**/eslint-config-react-app": "7.0.0"
}

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

removing this from package.json worked for me:

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

This should be the accepted answer.

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.

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"

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.

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.

I still experience this issue.

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

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

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

• remove “plugin:react/recommended” from “extends”
• remove “react” from “plugins”

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

This error indicates that there are 2 copies of eslint-plugin-react being fed into ESLint. https://github.com/facebook/create-react-app/issues/11825#issuecomment-1167856374

This is the problem!

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

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

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

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

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

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.

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.

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…

removing this from package.json worked for me:

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

This also worked for me, thanks!

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