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.
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
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.
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.
Just re-save package.json, that worked for me.
Solution worked for me.
npm remove eslint-config-react-app
Tried reinstalling eslint but throwing the same error.
Just removing worked fine for me.
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.
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.
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.
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
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
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
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.
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.
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.
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.
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.
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.
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
I add the same problem, just open the Package.json file, save again and close it
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
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
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
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.
Nothing Complicated Just Delete "package-lock.json" file
Beginner here, please help.
(1)If I have the files of a react project which was built on codesandbox or by another dev, how do I run the app and make changes in VSCode on my own machine.
(2)How do I run an existing personal create-react-app project on my machine, so as to continue buliding?
Open a terminal on vscode, then make sure you already node installed.
Type npm install after that npm run start or whatever command to run, you can see on package.json.
The first thing you need is to install updated version of nodejs, you can type to google “download nodejs” and make sure you download the stable version.
You need to open a terminal, also make sure you can locate your file path then type:
cd your file path: your-appName (this should be the name of your app)
I am working on a react app with a couple of colleagues, and after the latest pull I am no longer able to compile the app, but my colleagues are not having any issues.
On my end the app fails to compile because some #material-ui components are displayed as missing in the node_modules/#material-ui directory. However, when I search the folder, I see the files there, they are just shown in typescript format instead of js. However, when comparing my working directory with a colleague's it appears there are also files completely missing on my end that exists on theirs.
For example, when the app fails to compile I see this:
Failed to Compile
./node_modules/#material-ui/core/TextField/TextField.js
Module not found: Can't resolve '../FilledInput' in
'..../node_modules/#material-ui/core/TextField'
When I search this folder, the file is there but labelled 'FilledInput.d.ts'.
Has anyone encountered something like this? I have recompiled the app, and deleted the branch and recloned from remote but the issue remains.
Thanks
Have you tried removing node_modules and installing dependencies again?
Does npm install give any peer dependency warnings? Does this help?
npm i #material-ui/core --save
I have tried searching for the solution or work around to solve this but no success.
Here are some steps to describe my flow installation and eventually the issue I am facing.
Step 1: I have created a new react native project using
react-native init TestProject.
I wanted to configure flow for my project, but there was no .flowconfig file.
As we know that the flow version is needed to be specified for installing flow locally for the project, using the following script:
yarn add --dev flow-bin#0.79.1 babel-preset-flow.
Step 2: Even though I do not have .flowconfig file and hence no information of which specific version of flow to install, I try to install flow for my project using this:
yarn add --dev flow-bin babel-preset-flow.This has installed the latest flow 0.79.1.
Step 3: To generate .flowconfig file, following script is used:
./node_modules/.bin/flow init. This created the .flowconfig file in project directory with some default entries as follows:
Step 4: I restarted the VSCode to start flow server:
As the flow server was running, here I found out the there are 98 problems with the react-native library:
Step 5 : I added ./node_modules/. under [ignore] in .flowconfig file and restarted VSCode again.
Step 6 : Now the error caught by flow is, it cannot find the module react-native:
Here is the project's package.json:
Here is the React Native Environment Info:
Please suggest if anyone has solved this issue.
Thanks in advance.
You can use the [untyped]* section in your .flowconfig to tell Flow to treat the files as untyped but still recognise that they exist or even better use the new [declarations] option to just use the types even when there are errors in the library itself. This will prevent the import problem. In your case you might want to ignore only very specific dependencies because it is generally useful to get the types from libraries that are inside of your node modules.
* Introduced in Flow v0.61.0
I created an empty core 1.0 web app and added a package.json file copying the angular2 quick start package.json lines from this url.
I keep getting the message Dependencies - not installed and npm - not installed.
Does anyone know why this is happening? Do I have to actually install node.js on my PC in order for Visual Studio to be able to use it? Bower works perfectly...
This issue is being tracked here:
https://github.com/aspnet/Tooling/issues/479
Repointing Visual Studio to a different npm path will likely not make a difference - Visual Studio still seems to interpret a dependency on a package not supported on Windows as a breaking issue.
This is an IDE issue only. You can still build and run without resolving this problem.
But if you prefer to get rid of the not installed indicator, identify and remove the offending package then manually delete the node_modules folder, and re-save package.json.