'ESLint: Plugin "react" was conflicted between

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.

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.

Solution 1:^[1]

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!

Solution 2:^[2]

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

Solution 3:^[3]

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

Solution 4:^[4]

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

in your package json

stopped and run npm start again.

Solution 5:^[5]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Clarice Bouwer
Solution 2	Nacer MEDIOUNI
Solution 3	Christopher Richardson
Solution 4	fabrice kouonang
Solution 5	Cande

'ESLint: Plugin "react" was conflicted between

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]