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

Question

I have been having a little bit of issues when deploying my create react app, as it fails to compile and tells me Plugin "react" was conflicted between "package.json » eslint-config-react-app »

I was wondering if somebody has encountered the same issue and knows how to solve it, thank you. I am still very new to all this.

Answer 1

There is a conflict in the casing

C:\Users\Ruben|desktop\reactapp\test.... whereas the nodemodules is looking for C:\Users\Ruben|Desktop\Reactapp\test....

This is a windows specific problem, and previously react would have run the app regardless of this difference. Not anymore it seems.

The solution I used was to locate the folder and open with code; that ensures that the path matches directly with what is stored in node modules

Answer 2

Faced with the same issue on Windows 10 & VS Code & npm. As a workaround, open the package.json file in VS Code and save it (ctrl+s), then it works. You may need to repeat this step each time, a bit annoying.

Answer 3

The error occurred from the terminal, i had similar issues for a long time trying series of things from trying to update my dependencies using "npm install" to saving the package.json file, but all this approach will only fix the issue temporarily. The best and permanent solution is for you to cd into the project correctly from your terminal, the latest react is sensitive to the casing. eg you cd into C:\Users\Desktop\reacttutorials\antd-demo while the correct path is C:\Users\Desktop\ReactTutorials\antd-demo

Note the change in the casing.

Answer 4

Just re-save package.json, that worked for me.

Answer 5

I also ran into this problem on a Mac. As a temporary workaround, I was able to fix this by downgrading to version 6, by running

yarn remove eslint-config-react-app

followed by

yarn add eslint-config-react-app@6

I ran this twice. Always failed with version 7 (eslint-config-react-app without the "@6"), and always succeeded with version 6. YMMV, especially if you really need version 7.

Answer 6

I got this error when installing React with Visual Studio 2022 Standalone React project. The problem was Visual Studio showed my project name in Capitalized (as I typed), however, the folder name was in small-caps.

The fix was to manually rename the folder name to match the project name as shown in Visual Studio.

Answer 7

Windows 10 with VS Code user. I re-installed es-lint-config-react-app with yarn, or npm if you use it. and everything seems to be fixed so far.

Answer 8

Solution worked for me.

npm remove eslint-config-react-app

Tried reinstalling eslint but throwing the same error. Just removing worked fine for me.

Answer 9

i have the same err but cant figure it out... i am saying it to the discord server but no response..and also this is not happening with that specific project but also giving this pop up err with every create-react-app project.

Answer 10

I cleared my package-lock.json file and that fixed the issue for me

Answer 11

I am facing the same problem. I didn't understand the solution explanation. How exactly did you fix that, please?

Answer 12

not sure if you were able to get this totally fixed. I ran into the same issue after updating react-scripts. From what I could find this was a VS Code issue. By adding:

"eslint.options": {
   "pattern": "./packages/*/"
},

to the settings json for vs code - this fixed it for me. It stopped looking at the system or extension setting and instead uses the installed package version.

Answer 13

Had the same problem with the name case. When creating the project, had named it "React2", but VS ignored my case and named the project's folder "react2" (lowercase) instead. The solution was to:

1. Close Visual Studio.
2. Rename the folder. That is, make the case match the project name. (From a git-bash shell: mv react2 React2 to fix the name case.)
3. Open Visual Studio, and try again.

Answer 14

I had the same issue as you, and i got tired doing Ctrl + S on package.json, which is a one of the solutions. Another way to solve that is your path you have Desktop (D uppercase) and the path that the error show to you have desktop (d lowercase) so you can rename that folder to desktop and it will solve the problem

Answer 15

I fixed this issue doing this in package.json file:

"eslintConfig": {
"extends": "react-app" //remove this line
},

Answer 16

I had this issue after updating mui. None of the above solutions worked for me. Eventually, I ran npm dedupe a bunch of time and found all of the conflicted dependencies. After making a bunch of edits to my package.json and npm installing, this error went away.

Answer 17

I changed folder name, but I run the app from terminal in old folder name.

old Folder name: C:/.../ReactRepo/ReduxExample1 changed name: C:/.../ReactRepo/reduexample1

How I solve from terminal:

cd.. && cd reduexample1(paste here your new Folder Name) && npm start

Answer 18

This is an ongoing issue for me that appears when I edit and save any files and react tries to recompile. My temporary fix is whenever I save a file, I click on my package.json file, which I have constantly open on the side, and save. Then it compiles fine.

Answer 19

I solved this problem by deleting the eslint-config-react-app folder manually from node_modules and running yarn add eslint-config-react-app again.

Answer 20

I have faced the same problem, what I've to do is open the project by right-clicking & opening with VS Code option. Previously I was navigating to the project from the command prompt and opening this from the terminal itself, this was showing me the same error. I think this is a typical windows-related problem.

Answer 21

A similar problem occurred to me as well. Through git cmd with code. command, I opened my project. As a result, I got the same following error message. I open my react project manually when I run npm start I have no problems with it

Answer 22

I add the same problem, just open the Package.json file, save again and close it

Answer 23

Current react is case sensitive, Hence we have to specify the directory path with accurate casing.

Eg:

# This must be written with case sensitivity
C:\Users\Ruben|desktop\reactapp\test 

C:\Users\Ruben|desktop\ReactApp\test 

Soln. Use cd and write accurate location

Answer 24

I fixed this problem by updating the eslint instead of saving package.json every time.

1. Open command prompt, navigate to the folder where the react project is located.
2. Run npm update eslint

Answer 25

This issue for me was caused by what I had typed into Powershell when cd'ing into the folder where I wanted the react app to live.

I had typed the full path in lowercase, which didn't match the actual casing of the path.

To resolve this, I performed the following:

• I deleted the original react app folder
• Opened a new Powershell window (as administrator)
• cd into the correct folder ensuring the casing matched exactly .
• Ran the command npx create-react-app client-app
• cd into the newly created folder (client-app)
• Run npm start

And the app started without any issues.

Answer 26

from package.json I removed:

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

Then, I restarted the server with npm start and my web app is working again.

Hope it can help

Answer 27

I, too, have faced the issue. The problem arises when you overlook the case of the folder that you're opening through the command prompt. eg your directory is something like E:\D\users* TODO *
but in your terminal you typed cd todo-> this will give you the mentioned problem in the question asked. Just maintain the Case the way it's saved ie cd TODO

Answer 28

Nothing Complicated Just Delete "package-lock.json" file