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.

I faced the similar issue, I just opened the package.json file once and closed it. Ran npm start again and issue got resolved. Not sure what made it work. — Harnam Singh, Dec 22 '21 at 03:17
Please [edit] your post to add code and data as text ([using code formatting](https://stackoverflow.com/editing-help#code)), not images. Images: A) don't allow us to copy-&-paste the code/errors/data for testing; B) don't permit searching based on the code/error/data contents; and [many more reasons](https://meta.stackoverflow.com/a/285557). Images should only be used, in addition to text in code format, if having the image adds something significant that is not conveyed by just the text code/error/data. See [mcve] on what code is required. — Adriaan, May 09 '23 at 07:49

score 109 · Accepted Answer · answered Dec 17 '21 at 09:47

109

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

answered Dec 17 '21 at 09:47

blossom-babs

1,149
1
6
10

1

Hey, it seemed to work, I was reading all sorts of docs and threads, but this actually worked and it was a simple fix (As I thought it would be, just couldn't figure it out). So far so good, thanks a lot! – Ruben Dec 17 '21 at 10:47
41

If anyone else is struggling to understand the last bit of this fix, this is how I fixed the error... The root of the casing problem was coming from the difference in how the folders were capitalised in windows vs how I had typed them when using cd in bash. So I cd to the directory matching the casing of the actual windows folders and then ran npm start again from this location and the error was gone. – DanWheeler Dec 21 '21 at 10:22
works for me Thanks – Shehraz Arain Jan 28 '22 at 21:53
2

I'm struggling to fix it...what do you mean by "open with code"? – Fab Feb 01 '22 at 23:13
@Fab if you use vscode: go to your file directory, right-click on the options, if you do not see open with code right away, click on 'more' to see more options, Open with code opens the folder in vscode from your file directory – blossom-babs Feb 02 '22 at 05:10
@blossom-babs I'm using PHP Storm instead. What I did to not having issues during project development was the same solution from DaWheeler above but seems inadequate having to open the command line instead of npm start in the IDE. – Fab Feb 13 '22 at 19:44
2

Okay, for clarity here, what this means is in your command line you're at something like c:/users/myuser/documents/... but eslint is now case specific and needs it to be something like c:/Users/myuser/Documents. I found my windows folder is actually Documents with a capital D, not lower case. So, open a file explorer window and find out the case of your root folder. Then, in your command line, make sure to cd to that folder with the correct case, for example cd /Users/myuser/Documents . Then run your build command and it works fine. – trevorhpittman Mar 13 '22 at 14:41
Thanks to you every this is working now – Miki May 27 '22 at 16:07
Sure, its a windows only problem, but this solution worked for me as well – ndotie Aug 01 '22 at 12:42
This is why Iove SO. I could have seen struggling with this for hours. But here is the exact problem with the exact solution, all in one easy Google search. Thank you everyone. – Nick Hodges Mar 09 '23 at 22:25

score 55 · Answer 2 · answered Dec 17 '21 at 18:21

55

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.

answered Dec 17 '21 at 18:21

ihsany

870
10
12

8

Okay but this is not sustainable because the minute you make a change in any other file and save it, you're back to the error. At least this was my experience. @DanWheeler's comment above is a more stable solution, which is to ensure to use the same capitalization when you cd into your app folder. In my case my app was in `Stuff/app` but I typed `cd stuff/app`. To ease my life I simply renamed my Stuff folder to stuff, since I usually cd in lowercase. – Jomeno Vona Mar 15 '22 at 06:34
If you want to run the app from Visual Studio or VS Code, see [my comment](https://stackoverflow.com/a/75396544/4684837) for a permanent fix. – Lukas Feb 09 '23 at 09:27

score 18 · Answer 3 · answered Feb 22 '22 at 09:45

18

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. e.g. 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.

answered Feb 22 '22 at 09:45

Olami Olasunkanmi

191
1
3

5

In my case, this is the correct answer. The only thing everyone else's solutions do is create a 'temporary' fix. – Josepch Mar 19 '22 at 13:05
worked for me too, in the VS Code terminal I cd into the same path but with correct casing – mshwf Apr 30 '22 at 14:07
Wow! When I read this post I realized I was lazy to type correct casing... Worked in my case! – matt_dablu May 01 '22 at 18:23

score 11 · Answer 4 · answered Feb 02 '22 at 10:21

11

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

answered Feb 02 '22 at 10:21

ThomasNL

329
1
11

2

Having to resave the package.json file when this pops up every time there is a refresh isn't a fix. – Josepch Mar 18 '22 at 19:36
Exactly what @Josepch said. This does "fix" the problem, but it's not an actual solution. I don't want to have to save `package.json` after EVERY change... – C. Keats Jun 13 '22 at 17:50
True. See [my comment](https://stackoverflow.com/a/75396544/4684837) for a permanent fix. – Lukas Feb 09 '23 at 09:26

score 8 · Answer 5 · answered Dec 22 '21 at 18:31

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.

score 8 · Answer 6 · answered Jun 05 '22 at 08:22

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.

answered Jun 05 '22 at 08:22

Shekar

165
1
5

could not work for me – Dolphin Apr 03 '23 at 10:15

score 6 · Answer 7 · answered Dec 26 '21 at 22:29

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.

score 3 · Answer 8 · answered Dec 18 '21 at 18:11

3

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.

answered Dec 18 '21 at 18:11

Zach Nault

31
2

score 2 · Answer 9 · edited Sep 23 '22 at 13:27

2

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

edited Sep 23 '22 at 13:27

desertnaut

57,590
26
140
166

answered May 16 '22 at 11:01

Burak Ozcelik

101
1
6

score 2 · Answer 10 · answered Sep 05 '22 at 08:29

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

score 2 · Answer 11 · edited Nov 06 '22 at 23:54

2

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

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

edited Nov 06 '22 at 23:54

Ingo Steinke

766
3
11
30

answered Oct 30 '22 at 15:28

Sriraj Vasireddy

31
4

score 1 · Answer 12 · answered Mar 09 '22 at 14:04

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

score 1 · Answer 13 · answered May 28 '22 at 02:08

1

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.

answered May 28 '22 at 02:08

pablojmde

161
1
5

score 1 · Answer 14 · answered Oct 10 '22 at 15:26

1

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

answered Oct 10 '22 at 15:26

Marco Valeri

401
3
5

this work for me. – Dolphin Jun 29 '23 at 17:32

Ben D · Answer 15 · 2022-12-22T09:58:41.503

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

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.

score 1 · Answer 16 · edited Feb 09 '23 at 09:43

As many people wrote here already, the problem is with different casing of the react app folder.

The stable solution, if you want to run and debug your app from Visual Studio or VS Code:

Edit the Visual Studio Solution File (.sln) and change the path to the react app project to use the actual casing (lower case), as seen in Windows Explorer!

e.g. change this line:

Project(<Guid>) = "reacttstest", "ReactTsTest\reacttstest.esproj", <Guid2>

to this line:

Project(<Guid>) = "reacttstest", "reacttstest\reacttstest.esproj", <Guid2>

Root cause:

If you create a new project from Visual Studio and use upper case for the project name, the actual folder will still be lower case. The problem is: In the Visual Studio solution file (.sln), the path to the project is still written with uppercase characters (as you initially typed it), while the actual folder name is lowercase. When starting the app from Visual Studio, it will open a terminal session using the upper case version of the folder, taken from the solution file. When it starts the app from that folder, it will run into the problem.

Saving the package.json temporarily solves the problem (for unknown reasons), but it re-appears all the time. The only permanent solution when using VS is changing the folder name in the solution file.

score 1 · Answer 17 · answered Feb 22 '23 at 22:01

1

I faced a similar problem, I had it resolved by re-saving the package.json file.

answered Feb 22 '23 at 22:01

Nicodemus Ngufuli

81
6

How exactly does that work - you can't save nothing. There needs to be a change. – Rolf Jun 30 '23 at 18:30

score 0 · Answer 18 · answered Jan 16 '22 at 00:49

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:

Close Visual Studio.
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.)
Open Visual Studio, and try again.

score 0 · Answer 19 · answered May 10 '22 at 18:17

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.

score 0 · Answer 20 · answered May 16 '22 at 18:29

0

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.

answered May 16 '22 at 18:29

Dashiell Rose Bark-Huss

2,173
3
28
48

score 0 · Answer 21 · answered Jul 16 '22 at 15:37

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.

score 0 · Answer 22 · answered Aug 04 '22 at 19:11

0

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

answered Aug 04 '22 at 19:11

Krishnadev. V

345
2
8
23

score 0 · Answer 23 · answered Aug 30 '22 at 10:19

0

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

answered Aug 30 '22 at 10:19

Santos

9
4

score 0 · Answer 24 · answered Oct 19 '22 at 05:27

0

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. e.g. 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 i.e. cd TODO

answered Oct 19 '22 at 05:27

Raj Das

31
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 21 '22 at 14:31

score 0 · Answer 25 · answered Apr 19 '23 at 07:01

0

Deleting node_modules folder and re-installing all the packages again by npm install or yarn install or pnpm install fixed the issue for me .

answered Apr 19 '23 at 07:01

Mehdi Faraji

2,574
8
28
76

score 0 · Answer 26 · answered Jun 22 '23 at 03:44

0

Its because React is case sensitive so the problem is that eg your folder name is "HelloWorld" and you're accessing "helloworld" is terminal

answered Jun 22 '23 at 03:44

Maryam Naveed

99
1
11

score -5 · Answer 27 · answered Feb 05 '22 at 07:48

-5

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

answered Feb 05 '22 at 07:48

KRISHNA KESHOB PAUL

11
1

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

27 Answers27

Linked

Related