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.

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.

Answer 2

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

in your package json

2. stopped and run npm start again.

Answer 3

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!

Answer 4

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

Answer 5

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