Configuration conflict with 7.27.0

[DavidHenri008]

After updating from 7.26.1 to 7.27.0 I am getting an error when launching my application in debug.

I am getting the following error:

ERROR in Plugin "react" was conflicted between "....\package.json » ./config/eslint.js » eslint-config-airbnb » C:\MyProject\node_modules\eslint-config-airbnb\rules\react-a11y.js" and "BaseConfig » C:\MyProject\node_modules\eslint-config-react-app\base.js".

webpack compiled with 1 error

Reverting to 7.26.1 fixes the issue.

[ljharb]

It’s likely that CRA doesn’t use a semver range when depending on this plugin - if so, you simply can’t upgrade until CRA does.

[DavidHenri008]

I am using a long ago ejected CRA.
Would my dependencies help debug this issue?

[ljharb]

That doesn’t matter if it’s still using react-scripts, which is the thing that incorrectly pins its dependency versions.

[DavidHenri008]

Oh I see, sorry. I will try to check on their repo and post an update.
Thanks.

[DavidHenri008]

Since I am ejected I am not using react-scripts package in my application.

However, here is what I found:

• may application uses "eslint-config-react-app": "7.0.0-next.91"
• eslint-config-react-app (main version) does depends on "eslint-plugin-react": "^7.20.3"

So again I do not understand the issue here.

[ljharb]

In that case it should be fine. You may need to dedupe eslint-plugin-react in your lockfile.

Does eslint-config-react-app ail to include eslint-plugin-react as a PEER dependency?

[DavidHenri008]

I cleared my .lock file and now it works.
Sorry for the noise generated by this issue.

Thanks for your quick help.

[YChalfari]

Which file did you clear to fix this issue? I'm now having serious issues with this conflict
Just delete the package-lock.json ? The main one?

[DavidHenri008]

I am using yarn and relatively frequently, the .lock file becomes corrupted after some yarn upgrade-interactive. So I deleted only my yarn .lock file and run the yarn install command. As a note, I did NOT have to delete my node_module folder.
I do not know if npm lock file has the same issue.

[shivanya-chandra]

I am using yarn and relatively frequently, the .lock file becomes corrupted after some yarn upgrade-interactive. So I deleted only my yarn .lock file and run the yarn install command. As a note, I did NOT have to delete my node_module folder. I do not know if npm lock file has the same issue.

it's still showing the error even after deleting the lock file and running npm i after that.

[mggevaer]

I am also having this issue, but removing the lock files only temporarily solves the issue, error for me looks like this:

ERROR in Plugin "react" was conflicted between ".eslintrc.js » @react-native-community/eslint-config" and "BaseConfig » C:\Users\ ******* \Desktop\ **************** \react_frontend\node_modules\react-scripts\node_modules\eslint-config-react-app\base.js".

[ljharb]

@MartijnGevaert if you’re using CRA, you’re forced to stick with whatever version they use.

[mggevaer]

@MartijnGevaert if you’re using CRA, you’re forced to stick with whatever version they use.

Thanks for your reply.
I have tried to find out what version CRA uses but have been unable to do so (assuming I should match the version in my package.json to the one used in CRA).

Failing to do this I realised that you might mean removing "@react-native-community/eslint-config": "^2.0.0", from my package.json and letting CRA install it as a dependency.
The issue with this approach is that it then also needs to be removed from the eslintrc.js and then errors are no longer thrown for things such as unused imports.

[ljharb]

The unfortunate reality with CRA is that you need to eject to do anything meaningful.

[crud-engr]

Removing package-lock.json and re-installing does not seem working. Please what is the way forward as this is a very serious blocker in my current app.

[ljharb]

@crud-engr if you’re using CRA, then the blocker is CRA itself. If not, then please file a new issue.

[illume]

Had this issue too with CRA 5.

Used npm list --depth=3 to check the versions of the plugin installed.

Then I set the exact version and got happy-happy-joy-no-error.
npm install --save --save-exact [email protected]

I can understand why nuking the package-lock.json and doing it again could fix it, because then it sorts the version numbers out so they match. But then all your other dependencies may need rejigging... and that might not be possible for some.

So I guess it's perhaps ultimately an issue with npm dependency resolution when you add something which uses peer dependencies and there's a conflict. Or maybe now it's warning us, and before it didn't. Mystery.

[AlexMachin1997]

Hmm I've just worked through this thread but nothing seemed to help sadly.

Not sure what else to do.

It works fine in another project, though the front-end is all in the root of the project and not seperate into a /client and /server

[ljharb]

@AlexMachin1997 if you're using a "workspaces" setup, make sure that the plugin and eslint versions are the same throughout the repo.

[AlexMachin1997]

What do you mean by "workspaces" ? Are you refering to Yarn because I'm not using those at the moment.

I'm just using plain Yarn with the following setup:

[ljharb]

I meant yarn, or npm, or lerna, or any other monorepo tool.

You're doing that in the sense that you have a root package.json, and two subfolders each with their own package.json.

If you use the real terminal - the one inside your editor doesn't count - and run the eslint command directly inside client or server, what happens?

Unless you're using a workspaces tool, you can't really lint the subprojects from the root, which is usually what editor integrations do.

[AlexMachin1997]

Ah.

Yeah I've organised them like that just to seperate them.

I can't do that, all of the linting is done in the root of the project, basically in the root package.json I have some commands to manually lint the code see here

[ljharb]

In that case, client and server MUST have all their eslint things listed as peer deps, so that npm forces them to match the versions in the root.

[AlexMachin1997]

Would you mind providing an example with how that would work ? Seems like duplication but I'm probably missing something to fully understand it.

I didn't need to do this in a previous version of react-scripts and it worked fine hmm strange.

[JustFly1984]

Ok, so the issue is conflicting versions. I use resolutions field in package.json with yarn, or overrides field in package.json for npm projects to force the only package version in the repo.

[AlexMachin1997]

I've heard of "resolutions", though not too sure how it would work.

Questions:

1. Say "React" is installed in my client directory how would that look ?

2. Which package.json would it just be in my "root" package.json or somewhere else entirely ?

Sorry for all of the questions, this is an area of web development I know very little about 😅

[ljharb]

@AlexMachin1997 yes, it’s duplication, but that’s the choice you made by making a monorepo and also not using the available tooling for that.

[AlexMachin1997]

I didn't intentionally make the choice, I did it by accieent by just wanting to reorganise my project though I see an area I can invetigate further.

Monorepos seems really cool, I just need to learn more about them and set up a dummy project with whatever tools are available.

For now I've moved all the react stuff into the root and it works perfectly, I'll add that to the list of improvements for the arcitecture.

[boahs]

This issue :

Plugin "react" was conflicted between "package.json » eslint-config-react-app

Is happening now with all my CRA applications after trying to rename some directories in one CRA app

[boahs]

facebook/create-react-app#11825 (comment)

This has fixed my issue - Please refer to this other thread relating to the this issue

[iphyman]

Removing "plugin:react/recommended", from .eslintrc config file "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:prettier/recommended" ], seems to clear the error for me.

[mahfuz0498]

add "root": true in eslintrc.json file , it will ignore searching out of the root folder.

[wjureczka]

Adding "root": true and --resolve-plugins-relative-to . does not work for me. I am using yarn 3.2.0 with workspaces functionality with config like this:

yarnPath: .yarn/releases/yarn-3.2.0.cjs

nodeLinker: node-modules

pnpFallbackMode: all
pnpMode: loose

[curtvict]

This should be reopened. It seems like this plugin is no longer compatible with eslint 8.15.0.

[ljharb]

@curtvict please file a new issue.

[tommyspot]

Don't need to delete yarn.lock file.
In yarn.lock, I just saw 2 "eslint-plugin-react" existing (as picture below). So, only delete them and "yarn install" again.

It works for me. Thanks!

[cybervaldez]

This fixes it for me, with yarn add the following to your package.json

do a yarn install and make sure it's set in yarn.lock

[fedebaez]

After updating from 7.26.1 to 7.27.0 I am getting an error when launching my application in debug.

I am getting the following error:

ERROR in Plugin "react" was conflicted between "....\package.json » ./config/eslint.js » eslint-config-airbnb » C:\MyProject\node_modules\eslint-config-airbnb\rules\react-a11y.js" and "BaseConfig » C:\MyProject\node_modules\eslint-config-react-app\base.js".
webpack compiled with 1 error

Reverting to 7.26.1 fixes the issue.

It may not be the most technical solution, but when i had this issue, it got fixed when i stopped the compilation in the console and then ran it again

[dannypk]

this worked for me

https://stackoverflow.com/questions/70449712/create-react-app-error-in-plugin-react-was-conflicted-between-eslintrc-jso

[sadie100]

Just opening the package.json and saving once worked for me. Don't know why

https://stackoverflow.com/a/72064249/27479682