I have decided to upgrade to the new version of create-react-app and after doing so I tried launching the app via "npm start" and whenever it has loaded onto the screen the error below pops up:
Compiled with problems:X
ERROR
Plugin "react" was conflicted between "package.json » eslint-config-react-app » C:\Users\27par\Desktop\React Projects\development\finevines\node_modules\eslint-config-react-app\base.js" and "BaseConfig » C:\Users\27par\Desktop\React Projects\Development\finevines\node_modules\eslint-config-react-app\base.js".
Image of error:
https://gyazo.com/a03be194379ea52e6d7ddd697eefb8aa
I am wondering if anyone else is having the same issue as me and if there is any possible fix for it.
Thank you.
It is a known issue https://github.com/facebook/create-react-app/issues/11825.
You need to clear your .lock file.
You need to update all the packages as in the case of eslint-config-react-app's package.json it would have the previous version of create-react-app. So, basically the error is telling you that you are updating to the new version, but the other libraries in your project use another version.
Try doing -
npm run update
Just try running npm update in the terminal being in the root directory of the folder.
Hope this works.
I had this problem for hours today and none of the fixes on here or Github helped me. The only thing that did help me was changing the case of my "Projects" folder to lowercase -> "projects".
I suspect it is a windows specific file naming issue. I would make all of your folder names lowercase and probably not start them with a number. Also, eliminate the spaces in your folder names. I think Git Bash does not like these practices.
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
After I have created a new app with create-react-app or Razzle, error messages appear at build time which are quite concerning, security wise:
[Error: ENOENT: no such file or directory, stat '/initrd.img'] {
errno: -2,
code: 'ENOENT',
syscall: 'stat',
path: '/initrd.img'
}
Sometimes, a few other messages appear, with "/vmlinuz" "/initrd.img.old", "/vmlinuz.old" and ".steampath" instead.
Theses messages appear any time there's a build error (any build error that I generate).
This is basically the same problem as described in vue-CLI outputting very concerning error (security question) (but I was told to ask a new question). There were testimonies of three people having the same error messages in that thread.
I don't think there would be any valid reason for a React build script to stat the Linux kernel and a Steam directory, so there might be a malicious package at play here.
This only happens with npm, not yarn. (If your app has been created by CRA with yarn, you should do rm -rf node_modules && rm -rf yarn.lock && npm install);
The most minimal setup I could achieve while trying to isolate the culprits was:
creating a brand new app with create-react-app with npx create-react-app app1
and then generating an arbitrary build error in index.js, adding something like: import "nonexistent";
When I do that, I see the stat '/initrd.img'error mentioned above.
I'd like to know if you don't see the errors after executing the same exact steps. That would probably mean that it doesn't come from the packages installed but from elsewhere in my system.
It cannot come from my Node.js setup though, because I deleted my $HOME/.nvm, $HOME/.npm $HOME/node_modules, $HOME/.yarn and $HOME/.config/yarn before redoing the steps below.
There aren't many similar testimonials about this on the web, apparently. A bit more with "/.steampath" though.
I reported the issue to security#npmjs.com. They haven't replied yet.
If there is indeed a malicious script in the dependency tree of react-create-app (and Razzle), it should be investigated urgently.
Environment:
Node 14.14 installed with nvm 0.36.0
npm 6.14.8
create-react-app 3.4.1
Kubuntu 20.04
EDIT: I've also posted an issue at https://github.com/facebook/create-react-app/issues/9855. I thought this was serious and urgent enough that CRA maintainers should be notified now.
I got the same error and struggled with it for 2 days. Everything was running well on my Mac but as soon as I cloned the GitHub repository and tried to run my react app on the Linux system as well as AWS-Amplify and it showed me this same error:
[Error: ENOENT: no such file or directory, stat '/initrd.img'].
But after checking the build error logs I found that it was the problem with an import from react-bootstrap. The problem was 'the case' of the component I was importing. In my case I was importing bootstrap Container and used container instead of Container.
I simply corrected that and everything was resolved.
In my case:
WRONG: import Container from 'react-bootstrap/container'
RIGHT: import Container from 'react-bootstrap/Container'.
My Tip: Trivial mistakes like this can also give you this error. Check for incorrect imports and see the documentation for the libraries to check the cases.
In case your application is small and you have not gone too far with the development, then you can create a new react application and copy the component files one by one and run them to see which component is actually creating the problem. This is not the best idea but it worked for me the first time I got this error.
PS: Thank you for reading. This is my first answer on Stack Overflow. YAY!
There seems to be a simple answer: these messages could just come from Node searching for node_modules in the project parent directories all the way to the filesystem root. (See https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders). It might also try to follow symlinks in case they point to a node_modules directory, and emit an error each time it encounters a broken symlink in the process.
That's plausible and reassuring. No malicious script involved.
I removed initrd.img, /initrd.img.old, /vmlinuz and /vmlinuz.old, which were indeed broken symlinks. So I shouldn't get these errors anymore.
In my case it was an incorrect import statement of a static CSS file in my react-app.
VS Code for some reason auto imported a "classes" object from some random route when trying to declare const classes = useStyles(); using Material UI makeStyles method.
So check if you have any incorrect import statements of files.
In my case the message appeared when I installed new #mui/material ui lib without #emotion/react #emotion/styled complement
The missing library name was written in the error message in the console, but I had to catch it with PrtSc cause the message mentioned above replaces it almost immediately.
Node.js tries to find modules in the parent directories, up to the root. Possibly in your /boot there is a broken symlink. The message indicates that there is a package not found or a mispelled import in your codebase.
In my case this error fix manual installing react-router-dom npm i react-router-dom
For me, an npm package was missing in the package.json. Installing the package with npm install --save <package> solved the issue
In my case, an import syntax error. I had forgotten the first forward slash before 'components/MyComponent'.
In my App.js:
import MyComponent from '..components/MyComponent'
change by:
import MyComponent from '../components/MyComponent'
The same error message occurred to me. After removing all files at node_modules and running npm install to reinstall them, it says the node-sass dependency failed to run, then after rebuilt of the dep, the error disappeared.
I also saw this error. For me the reason was that I was not installing the npm package in my project directory but in some other directory.
I noticed package.json and package-lock.json in my project were not getting updated even after running npm install --save <package_name>