Related
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
so I tried to run npm start on my react app.
But It's not running, instead it responds like this:
'/Users/macintoshhd/iCloud Drive (Archive)/Documents/Abu Abdillatief/Self Study/vetme/src/.' were found.
Can anybody help? In previous projects everything runs fine, and I tried to run other previous projects again that has no . file in src folder, it ran well, no problems. Plus, this one also has no . file in src folder as well.
I dont know if . refers to index.js or any other files, but it clearly has no different when it comes to files contained within src when initializing npx create-react app ... or create-react-app ....
What I've tried:
Delete node_modules
Re-run npm install
Update npm version
I hope this information could help in finding solutions, I cant quite see the problem myself, thank you.
I face the problem also, and found this link https://github.com/facebook/create-react-app/issues/9902
There mentioned that your directory path shouldn't have any space, since the last react update.
C:\Desktop\React App (BootCamp)\myApp> npm start
After I removed the space from the directory path, it still doesn't works.
C:\Desktop\ReactApp(BootCamp)\myApp> npm start
Then I tried to remove the parenthesis also... and it works.
C:\Desktop\ReactAppFromBootCamp\myApp> npm start
I've had the same issue after I deleted everything in the src dir and all I had to do to fix the problem was to stop the server with ctrl+c and then npm start.
It's very weird, I had the same issue with a new project I created and there is no way to make it work.
The solution for me was to copy all the files from a working project (instead of creating a new react app) and then it ran fine.
Having the same problem... it happens to me when I run create-react-app in a particular folder. it doesn't happens when I run it a in a new directory.. still trying to figure it out.
anyway..
I tried to move around this new react app folder to any path that doesn't contain archive in its directory, it runs well (even though its parent folders has space in its name).
But, my previous projects are located inside a path which contains archive, it runs fine too, so I'm not sure if these are due to the latest changes React made or something in that nature.. but at least it runs now and I can continue building my portfolio.
Hope this runs on your machine too :)
I have the same problem when I created a new app recently using create-react-app tool. Maybe the problem is the path of the folder which includes the react app is too long, or some special characters in the path. When I put my app into a new folder which has a short and simple path, it works. A new problem caused by new updates.
I guess this is a problem with the new version of React (it has been updated from 16.13.1 to 17. **. **).
I took from my old file "package.json" " " dependencies ": {" react ":" ^ 16.13.1 "," react-dom ":" ^ 16.13.1 "," react-scripts ":" 3.4. 3 "...}, removed all files from "src" but did not touch "app.js" and "index.js" and used npm i & npm start.
The application started, but I had a problem - there was no "import React from 'react'" in "App.js". check this option.
According to the git hub issue, they mentioned "your directory path shouldn't have any space" but in my case it still do not work, Once I move to app to Desktop and npm install and npm start, It worked fine but I have no idea what was happening under the hood.
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>
I have just started learning React and created a first app by using below commands
npm install -g create-react-app
npx create-react-app myapp
after this i moved into my app folder and then used 'npm start' command to start the server but i go this error.
Please help me to resolve this problem and starting the react server.
If you have an & in your project's path you will run into this issue, at least on Windows it seems like. The part in the path after the & is interpreted as another command as per the error and everything breaks from there.
Confirming that as soon as it's removed, npm start works fine.
It's happening most likely because of an & in your folder name which is getting used as the path of your project. So Check the whole path trail of your project and rename any folder with "&" to only text-based names.
The Run - npm start from the console. Hope it will solve your problem. Enjoy coding and changing the world.
this is happening because of one of the following reason -:
your project directory has & symbol in the name, this happens because when node encounters & symbols it breaks the string into 2, ( if you have worked with simple http authentication, you would know this issue )
delete you node_modules, package.lock.json, install both again and run start script - suitable for linux systems only,
If your problem still exists, re-install node in you system again, and check for & symbol in your project dir.
Its a pretty simple answer . I have not yet found out why it works but try this :
react-scripts build
In my case, my file directory has a "&" symbol I just remove this and symbol and this problem is solved
It looks like npm install not executed while app creation. What you can look for is:
Check if package.json is inside myapp.
If node_modules directory is not created then move to 3.
Run npm install or yarn to load the scripts and other dependencies.
When done installing then try npm start or yarn start.
I edited my package.json file:
"scripts": {
"start": "node node_modules/react-scripts/scripts/start.js",
"build": "node node_modules/react-scripts/scripts/build.js",
"test": "node node_modules/react-scripts/scripts/test.js",
"eject": "node node_modules/react-scripts/scripts/eject.js"
}
I ran into the same error since yesterday, I tried almost everything
Deleting node-modules and package-lock.json
I created a new react-app
I've tried even installing some stuff globally as suggested by other developers
But none of these really worked.
Finally, I've found that I had & in my project path
remove special character for example "&" in your local drive directory path, I had & in directory name and finally deleted and problem solved
In your project path (Larsen & Toubro/react/myapp), there is a "&" symbol. Because of that, it will display the error. When rename that "Larsen & Toubro" folder without "&" symbol, the issue will fix.
In the error message it says Toubro\react[...] while leaving out your whole foldername OneDrive - Larsen & Toubro\react
You may try installing the app again in a different folder with a less complex folder name.
I used Nikhil Kumar's answer:
$ npm build
$ npm start
I had a similar error when executing yarn start. Removing any special signs from the path (in my case an umlaut) resolved the problem.
Please check with the Project path conatins "&". This is the major cause of the issue.
My issue got fixed after removing the C:*R&D*\REACTJS\thepage from the path.
try it yarn set version classic command then npx create-react-app your-app
https://pretagteam.com/question/createreactapp-error-cannot-find-module-reactscriptsscriptsinitjs
In windows machine, I have folder with name contains capital i (which is "İ") in Turkish alphabet. This character leads to that error. While giving name to folders, avoid using characters other than English alphabet if you are a developer.
I had this error in my React project. This error happens because your project doesn't has installed a react-script.
You can solve installing this way...
npm i react-script
npm start
Your app will run now! :D
When running react-native link it gives this error,
It says,
rnpm-install ERR! It seems something went wrong while linking. Error: Cannot read property 'UIAppFonts' of null
I had this exact same problem. I had accidentally deleted by Info.plist file in my ios directory. Restoring it, fixed my issue.
I had same issue not quite long, running react-native links will give you error.
If you are using yarn simply run:
yarn remove react-native
yarn add react-native
Then run react-native link
This fixed it for me.
I had this problem and in my case it was because I had renamed the project but forgotten to update newname in a few folders and files.
In case anyone runs across this, this is how I fixed the react-native linking issue w/ UIAppFonts:
# Regenerates ios files
react-native upgrade
# Works now
react-native link
Basically, it's pretty similar to the answer that Matt posts above, except I didn't know how to restore it.