ESLint: Plugin "react" was conflicted between

Question

I have a React app inside a monolith npm component package. The React app serves as a demo site which consumes this component package as an integration step over and above Storybook.

local-component-package

├── .storybook
├── demos
│   └── react
│       ├── node_modules
│       └── package.json
├── node_modules
├── src
├── .eslintignore
├── .eslintrc.json
└── package.json

The component library (parent directory) has ESLint enabled while the demo app does not.

When I build and run my React demo app, I see the appropriate page being served. The moment I make a change and the page gets hot reloaded then I get the following error:

Plugin "react" was conflicted between "../../.eslintrc.json" and "BaseConfig » /path/to/project/demos/react/node_modules/eslint-config-react-app/base.js".

It seems to be telling me that there is an npm package (eslint-config-react-app) present in the demo app that conflicts with the base (or parent) .eslintrc.json file but I am not sure why or how to address this.

Here is my demo app's package.json:

"dependencies": {
  "react": "~16.8.5",
  "react-dom": "~16.8.5",
  "react-scripts": "5.0.0",
  "local-component-package": "file:../../build"
},

Note: My base component npm package uses yarn as to get the latest versions of Storybook and Webpack and the numerous necessary plugins to work well together. The demo apps I have running use npm because they simulate running production applications.

• I am using VSCode and I have the ESLint extension dbaeumer.vscode-eslint installed. I have disabled it to eliminate that it is not causing the problem. The nodule_module specified above does appear inside the react demo app's node_modules and its config is being consumed.

• I have added an .eslintignore file and added ignorePatterns in .eslintrc.json which also did not take effect. The linter doesn't appear to be actually linting this directory so it seems that the ignore is working but the configuration is still clashing.

What I'd like to know is:

• Why is this module inside the demo React app if it is not explicitly part of the node_modules?

• How do I get these configs to stop clashing?

Note: I have looked at the following questions that did not help me.

• Plugin "react" was conflicted between "package.json » eslint-config-react-app
• Error when deploying react app and it keeps sayings << Plugin "react" was conflicted between "package.json » eslint-config-react-app » >>
• Error when deploying react app and it keeps sayings << Plugin "react" was conflicted between "package.json » eslint-config-react-app » >>

I am using:

• macOS Monterey 12.1 (M1)
• Node v16.13.0
• npm 8.3.0
• yarn 1.22.17

Let me know if you need more information.

Eddra

Answer 1

I had the same problem and the cause of the problem for me was that when I cd'ed into my project's directory, I wrote the folder names in lower case, while the actual folders were named in sentence case. So make sure that the path you cd into from the terminal has the same exact capitalization as the real path.

Inchoation

What env are you on where you're able to be in a folder in the wrong case? That shouldn't be possible anywhere. – Radiothorium

spoke too soon, thats what was happening for me, apparently git bash on windows will let this happen if you use a full path cd command. it even reports the incorrect case on pwd making it even weirder.... – Radiothorium

This is exactly what happened to me! Created a react app via the dotnet template, which defaults the folder name to ClientApp. I then deleted the contents, recreated the app using the react typescript template, but react doesn't accept CamelCase folders, so I ended up with clientapp. My muscle memory made me type "ClientApp" when browsing to the directory. You saved me a bunch of hours!! – Cheyennecheyne

Answer 2

It has been pointed out to me that it seems that I've got different versions installed of eslint-plugin-react.

The solution offered to me was that since I'm not actually interested in linting the react side of things, I could set DISABLE_ESLINT_PLUGIN to true in the environment.

See https://create-react-app.dev/docs/advanced-configuration/ That switched off the linting in the react project altogether.

A big shout out goes to Xandor Schiefer for helping me with this!

Eddra

Answer 3

1. just delete "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] },

in your package json

2. stopped and run npm start again.

Anzac

Answer 4

try lowercase the app name in package.json, this worked for me

Denazify

Thank your for your insights. Everything is already lower case in my package.json file so this did not help me unfortunately. – Eddra

checks if all packages are in the same version that the package. JSON – Denazify

Answer 5

Try to uninstall your current node.js and reinstall it. It worked for me!

Second

Answer 6

I also got a similar error right after using create-react-app. I ran the command 'npm start' and that is the error message I got. My solution -> Open the react project folder in your code editor. Go to the terminal, cd to the project folder and then run the command again.

Transilluminate

Does that mean you just ran the command in the wrong folder? Doesn't that give you a whole different error (probably something like "no package.json was found")? I am not sure if this applies to the question, which is about a specific error, that appears when running the command in the correct folder. – Nisus

This does not generate an error, because it is not entering the wrong folder, it is simply entering the root folder of the react application. For example, it could have a folder called APP and two other folders inside APP, backend and frontend. Then he opened the APP folder in VSCode and in the terminal ran cd frontend and executed. In my case it was a bit different, I opened the folder for my react application and ran cd .. and then cd web (the name of my app is web). – Current