CODEWITHSUNDEEP
javascriptnode.jsreactjsnpmyarnpkg
Clarice Bouwer
Clarice Bouwer

Reputation: 3811

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.

What I'd like to know is:

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

I am using:

Let me know if you need more information.

Upvotes: 7

Views: 24785

Answers (6)

Acubeos
Acubeos

Reputation: 11

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.

Upvotes: 1

Cande
Cande

Reputation: 181

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.

Upvotes: 11

fabrice kouonang
fabrice kouonang

Reputation: 71

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

in your package json

  1. stopped and run npm start again.

Upvotes: 7

Nacer MEDIOUNI
Nacer MEDIOUNI

Reputation: 11

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

Upvotes: 1

Clarice Bouwer
Clarice Bouwer

Reputation: 3811

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!

Upvotes: 10

Kuristoph Richardson
Kuristoph Richardson

Reputation: 171

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

Upvotes: 1

Related Questions