create-react-app - react-scripts: command not found - reactjs

i've just started out with react on codepen, and I really enjoy it! I decided to install it on my MacBook Air. I installed create-react-app using npm, and everything looked good. I then started a project, and everything went smoothly. When I ran npm start, I got an error:
sh: react-scripts: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! react-app#0.1.0 start: 'react-scripts start'
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the react-app#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I've come to the conclusion that npm can't find react-scripts. I have done almost everything I have come up with: I have updated npm; I have reinstalled the modules; I have started a new project, but I still get the same error. I've checked, react-scripts is in my node_modules file. The only thing I haven't done is install react-scripts globally, but the creator of create-react-app has said that that is a very bad idea. What should i do?

Just solved the problem:
In package.json, I changed "start": react-scripts start", to "start": "NODE_ENV=production node_modules/react-scripts/bin/react-scripts.js start". This solved the problem.

Try running npm install before running npm start, if that doesn't work check out this article on the same issue - sh: react-scripts: command not found after running npm start

Adding the entire path also worked for me:
"start": "node_modules/react-scripts/bin/react-scripts.js start"
instead of just:
"start": "react-scripts start".
I wish I knew why this behavior changed in my pc.
Coincidence or not, I updated my xcode today.

delete package-lock.json:
sudo rm package-lock.json
delete node_modules:
sudo rm -rf node_modules
optionally upgrade npm:
sudo npm install -g npm
and install project again
npm i
run project:
npm start
worked for me in the situation like you described

Related

npm start suddenly stops working on react app

I've been learning react for about two weeks, when suddenly npm start won't run. This is what I get instead:
sh: react-scripts: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! recipe-app#0.1.0 start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the recipe-app#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/Michelle/.npm/_logs/2020-07-29T14_35_20_988Z-debug.log
After a ton of googling I tried
npm install -g npm#latest but the permission was denied.
Deleted and reinstalled node several times, tried using Homebrew, etc, but nothing worked.
Edit: Found the solution!
Npm couldn't find react-scripts, so I had to change the scripts in package.json to
"start": "node_modules/react-scripts/bin/react-scripts.js start".
You need to install react-scripts
npm install react-scripts
The first line of the logs you just sent indicates your computer doesn't know the command react-scripts.
It means you need to install it.
When you use the -g option with npm install, it means you want to install globally the package, setting the package accessible for every user on your computer. That's why you have a permission error. You can solve this by adding sudo before the command maybe or running it with a elevated user.
It's not mandatory to install the package globally.
I suppose your package.json file contains a script named start starting with react-scripts.
If you install the react-scripts package with npm install react-scripts, you'll find the binary under node_modules/.bin/react-scripts.
Then you can replace in your start script configuration react-scripts with ./node_modules/.bin/react-scripts.
An example of a package.json file:
{
"name": "myapp",
"version": "1.0.0",
...
"scripts": {
...
"start": "./node_modules/.bin/react-scripts [...]",
...
},
...
}
running "npm install react-scripts" even if I had before, worked for me

npm start gives error `webpack-dev-server: not found` even if it is installed

In package.json devDependencies I have webpack-dev-server installed:
"webpack-dev-server": "3.2.1"
but when I run the start script, which looks as follows:
"start": "webpack-dev-server --inline --config demo/webpack.config.js --port 9000 --mode development"
I get this error:
sh: 1: webpack-dev-server: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! your-app#2.0.5 start: `webpack-dev-server --inline --config demo/webpack.config.js --port 9000 --mode development`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the your-app#2.0.5 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
What is the issue here?
Notice that every script you want access in cli, script should be install in your system as globally.
you can install globally every script you want with npm. that way add -g in your command when you want install package.
In your case, you should run this command:
npm install webpack-dev-server -g
after that you can access webpack-dev-server in your command. like your code webpack-dev-server added to start script in your package.json file.
After that, you can run npm install webpack-dev-server --save-dev command to add this package in your node_modules.
Now, you have access webpack-dev-server in your cli. As you write in your start script in your package.json.
My app by default, did a "production" install, which didn't install devDepencies.
I did:
export NODE_ENV=development
before executing npm install and it installed dev dependecies, so now it works.

"sh: 1: react-scripts: not found" In Docker

I have a Docker container that fails to do a npm install for a react.js app that is cloned in the container when it is built. Would anybody know how to resolve the issue?
Error:
sh: 1: react-scripts: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! myrideweb#0.1.0 build: `react-scripts build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the myrideweb#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2018-06-19T04_00_09_065Z-debug.log
Dockerfile:
FROM ubuntu
Run apt-get update
Run apt-get install curl -y
Run curl -sL https://deb.nodesource.com/setup_10.x
Run apt-get install -y nodejs
Run apt-get install -y git
Run apt-get install npm -y
Run apt-get update -y
Run git clone https://github.com/sdrafahl/TerraWeb.git
WORKDIR /TerraWeb
Run npm install -g --save npm#latest
...
I have a similar issue and I managed to work around by changing:
"start: "react-scripts start"
to:
"start: "./node_modules/.bin/react-scripts start"
in the scripts section package.json.
I use the classic node base image but it should work more or less the same.
And I am still investigating why NPM is not able to resolve react-scripts when running inside Docker, any further help is very welcome :-)
This happened to me when 'react-scripts' was listed under the 'devDependencies' in the package.json file. Moving it to the "dependencies" section solved the issue.
Deleting package-lock.json and re-installing packages with npm install before building the container solved the issue for me.
I had this issue with react-scripts#4.0.1. I uninstalled and re-installed and that seemed to do the trick.
npm uninstall react-scripts
npm install -D react-scripts
Ok, I just managed to solve this problem in few simple steps, and i hope these instructions will help you too.
I run a docker with Ubuntu on Windows 10, and I share the node_modules folder by volume if this sounds familiar to you, so I believe this solution will help you.
Accidentally I installed the node modules from my Windows user, and that what cause the whole permissions problems.
So what I did is to delete the node_modules directory.
Then I installed the node modules from the Ubuntu Terminal, run npm install.
You may have to install npm on your Ubuntu, I downloaded the nvm installation file with curl with those instructions, How to install node on WSL for Linux, and then you may run npm install and then the react script will be able to run.
After you run npm install from Ubuntu, build and run your dockers.
I had this same problem recently and I was able to solve it, however, I don't like the solution very much but I think it's OK since it should run in Docker or in you local machine. That being said, my suggestion is to update the package.json with the following:
{
"scripts": {
"start": "$(npm bin)/react-scripts start",
}
}
npm-bin docs

react-scripts: command not found

I am currently trying to use create-react-app which uses three different packages: react, react-scripts and react-dom. I have installed create-react-app and then when I change into the directory and hit npm start I get a react-scripts: command not found. I've ran into a lot of problems with this. I can see react-scripts is in my node_modules folder but I keep getting command not found when trying to run npm start. I tried to delete and re-install all of my node_modules but it didn't work. Anyone else having this issue?
✘ ✝  Node/toDoApp/my-test   master±  npm start
> my-test#0.1.0 start /Users/jzilch/Desktop/Web
Projects/Node:Express/Node/toDoApp/my-test
> react-scripts start
sh: react-scripts: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! my-test#0.1.0 start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the my-test#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.
Firstly Delete package-lock.json file in your project folder.
And then install dependencies again by npm install. That should solve this issue.
Delete the /node_modules directory and the package-lock.json file using the rm command:
rm -rf node_modules
rm -rf package-lock.json
Install react-scripts using the following command:
npm install react-scripts
Install the dependencies using the following command:
npm install
Start the local server by running the following command:
npm run start
Note: If you are a Linux user then don't forget to add the sudo command before npm.
This usually happens because of a bad npm packages installation (using npm and yarn at the same time?). It can be desperating, but if you try these steps, it should work.
1st solution:
Remove node_modules folder. At the project's root folder, run
> yarn
> yarn run start
2nd solution:
At the project's root folder, run
> yarn upgrade
> yarn
> yarn run start
Next time you want to add a dependency using create-react-app, I recommend you to use 'yarn add' instead of 'npm install'.
(Source: https://github.com/facebook/create-react-app/issues/1155)
I use this in a dockerizer enviroment.
I already install locally in node_modules using package.json.
so, I added this:
RUN npm install -g react-scripts
RUN npm install
That solved my confusing issue
One option is to install the react-scripts package globally using the -g flag. This will make the command available to node, regardless of the working directory.
This command will install react-scripts globally:
npm install -g react-scripts
As I was using yarn, I had to run yarn add react-scripts.
I had this problem for ages and I eventually found my solution by sheer chance.
Turns out, you can't have spaces in any folder names.
e.g.
~/projects/tutorial/ReactJS/JavaScript Framework: ReactJS/app-name
won't work because JavaScript Framework: ReactJS contains spaces.
In general, it's probably not great practice to be using spaces in folder/file names anyway but I hope this saves someone at least 4 hours of trial and error.
I would recommend removing the : from your folder names too! (just to be safe)
i too faced this problem once .to solve this ,delete your
node_modules
yarn.lock
manifest_lock.json
it works .
I fixed it by changing folder name in my local system, from
new/landing
to
new_landing
However, the git branch name remains like "new/landing". This was the case with my MAC system.
For me, I deleted the project and initialized another one with the npm create-react-app <Folder Name> script. Instead of create-react-app <Folder Name>.
It worked for me.

create-react-app Failing to create a new React app in windows 10

I have Create-react-app version 1.4.3 installed. When I try to create a new App , I get the following messages in the command prompt. Please help me find and fix the issue.
C:\Users\GSI-KOL\Desktop\server>create-react-app client
Creating a new React app in C:\Users\GSI-KOL\Desktop\server\client.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
uglifyjs-webpack-plugin#0.4.6 postinstall C:\Users\GSI-KOL\Desktop\server\client\node_modules\uglifyjs-webpack-plugin
node lib/post_install.js
npm ERR! path C:\Users\GSI-KOL\Desktop\server\client\node_modules\fsevents\node_modules
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall lstat
npm ERR! Error: EPERM: operation not permitted, lstat 'C:\Users\GSI-KOL\Desktop\server\client\node_modules\fsevents\node_modules'
npm ERR! { Error: EPERM: operation not permitted, lstat 'C:\Users\GSI-KOL\Desktop\server\client\node_modules\fsevents\node_modules'
npm ERR! stack: 'Error: EPERM: operation not permitted, lstat \'C:\\Users\\GSI-KOL\\Desktop\\server\\client\\node_modules\\fsevents\\node_modules\'',
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'lstat',
npm ERR! path: 'C:\\Users\\GSI-KOL\\Desktop\\server\\client\\node_modules\\fsevents\\node_modules' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\GSI-KOL\AppData\Roaming\npm-cache\_logs\2017-11-08T13_08_03_705Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts has failed.
Deleting generated file... node_modules
Deleting generated file... package.json
Deleting client / from C:\Users\GSI-KOL\Desktop\server
Done.
C:\Users\GSI-KOL\Desktop\server>
I was faced this same problem . It is due to the issue with npm .
please run the following command in command Line
npm cache clean --force
then run
create-react-app <project Name>
If your problem still exist then switch from npm to yarn
run the following commands, it solved my problem
npm install -g yarn
yarn global add create-react-app
create-react-app <projectname>
It looks like you need admin privileges to write some of the generated files. Can you create a terminal instance with administrator rights then reissue the command?
You probably had "create-react-app" running before, which was the problem in my case anyway. The way I solved this was using
npm cache clean --force and ran create-react-app my-app again.
I suspect NPM has an issue. However, this was how I was able to resolve it
Follow this steps:
npm install -g yarn
yarn global add create-react-app
Create-react-app <projectname>
npm cache clean --force
Then try
npm create-react-app navigate
I also faced same issue and I rectified it using the comment
given below:
npm cache clean --force
After this comment try:
npx create-react-app project_name
Just run this one command to resolve issue:
sudo chown -R 1001:1001 "/home/<user_name>/.npm"
This is due to the network issues try to download all dependency one by one or try to clean cache "npm cache clean --force" after this try to create an app
npx create-react-app <app__name>. But your internet connection should be stable.
I tried the npm cache clean --force and the yarn route but, neither worked. What worked for me was running Powershell as Administrator then entering:
set-executionpolicy remotesigned
try this
npm install -g yarn
yarn global add create-react-app
create-react-app my-app
I had the same problem and this was solved to me with these steps:
Be sure that you have the lastest version of Node.js installed. (https://nodejs.org/)
npm install -g create-react-app
create-react-app client-app --use-npm or npx create-react-app client-app --use-npm
i hope it helped..
this should work
npm cache clean --force
I was also facing the same issue, here is how I fixed it :
1. I first cleaned my cache using the --force keyword
2. I reinstalled create-react-app globally
3. I recreated my app.
Illustration:
clean your cache
npm cache clean --force
Reinstall create-react-app globally
npm i -g create-react-app
Recreate your app
create-react-app .
This is what I did
npm install -g yarn
then this
npx create-react-app my-project
For me, i wasn't connected to the internet when i tried to run 'create-react-app', so i connected and tried it, it worked, i'm guessing it needed to install some packages from the internet.
Creating a new React app in C:\Users\CM\Downloads\react\github-profile.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
npm ERR! path C:\Users\CM\AppData\Roaming\npm-cache_cacache\content-
v2\sha512\36\c6\c3e97514319bc1c6d40026e58325e782e1016c996b1fa335b1
0893d67f7339e4af62bb688c0da2aaca839d4c9d51e2eb015eec65545008a3cad93d00f806
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall lstat
npm ERR! Error: EPERM: operation not permitted, lstat
'C:\Users\CM\AppData\Roaming\npm-cache_cacache\content-
v2\sha512\36\c6\c3e97514319bc1c6d40026e58325e782e1016c996
b1fa335b10893d67f7339e4af62bb688c0da2aaca839d4c9d51e2eb015eec6
5545008a3cad93d00f806'
npm ERR! { [Error: EPERM: operation not permitted, lstat
'C:\Users\CM\AppData\Roaming\npm-cache_cacache\content-
v2\sha512\36\c6\c3e97514319bc1c6d40026e58325e782e1016c996b1f
a335b10893d67f7339e4af62bb688c0da2aaca839d4c9d51e2eb015eec6554500
8a3cad93d00f806']
npm ERR! cause:
npm ERR! { Error: EPERM: operation not permitted, lstat
'C:\Users\CM\AppData\Roaming\npm-cache_cacache\content-
v2\sha512\36\c6\c3e97514319bc1c6d40026e58325e782e1016c996b1
fa335b10893d67f7339e4
af62bb688c0da2aaca839d4c9d51e2eb015eec65545008a3cad93d00f806'
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'lstat',
npm ERR! path:
npm ERR! 'C:\Users\CM\AppData\Roaming\npm-cache\_cacache\content-
npm ERR! stack:
npm ERR! 'Error: EPERM: operation not permitted, lstat
'C:\Users\CM\AppData\Roaming\npm-cache\_cacache\content-
v2\sha512\36\c6\c3e97514319bc1c6d40026e58325e782e1016c996
b1fa335b10893d67f7339e4af62bb688c0da2aaca839d4c9d51e2eb015
eec65545008a3cad93d00f806'',
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'lstat',
npm ERR! path:
npm ERR! 'C:\Users\CM\AppData\Roaming\npm-cache\_cacache\content-
v2\sha512\36\c6\c3e97514319bc1c6d40026e58325e782e1016c996b1fa335
b10893d67f7339e4af62bb688c0da2aaca839d4c9d51e2eb015eec65545008a3cad93
d00f806',
npm ERR! parent: 'postcss-image-set-function' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a
text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-
check thenpm ERR! permissions of the file and its containing directories, or
try running
npm ERR! the command again as root/Administrator (though this is not
recommended).
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\CM\AppData\Roaming\npm-cache_logs\2019-03-22T10_
27_19_722Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-
scripts has failed.
Deleting generated file... node_modules
Deleting generated file... package.json
Deleting github-profile/ from C:\Users\CM\Downloads\reactDone.``
i was facing similar error but i tried to run create-react-app command many times and finally it was created , this was the problem with my internet connection. check your inernet connection
I also encountered with the same problem, According to the error, you have a problem with your npm.
Try this command
sudo chown -R 1000:1000 "<location of npm>/.npm"
just take an example of my command
sudo chown -R 1000:1000 "/home/vidit/.npm"
All you need is npm cache clean --force
Works 100%
In my case, it happened when I aborted a wrong command I initiated.
Then I ran npm cache clean --force and the cache was cleaned; after that, I ran my npx create-react-app and it worked perfectly as it should.
Quick tip: Uninstall create-react-app from your machine like so, npm un -g create-react-app and run npx create-react-app instead of npm create-react-app any time you want to create a new react app.
Reason: npx will always use the latest version of create-react-app to create a new react app for your project, and npx uninstalls/removes the create-react-app package from your machine when it's done.
Don't worry, it takes about 20 seconds to install the create-react-app package, so...
Do not forget to npm cache clean --force when npx create-react-app goes bananas (i.e. refuses to work).
I faced the same problem, and I did these to solve the problem;
npm clean cache --force..
this didn't work... I returned a warning npm WARN using --forcing recommended protection disable.
I ignored that and did and reinstalled create-react-app globally by running;
npm i -g create-react-app
I created my app(project name) by running;
create-react-app my-app-name
I believe this should work for you..
I face the same issue.
I Try this But it does not work for me
npm cache clean --force
So uninstall Node
and install the latest version. It's worked for me
Hope it works for you :)
I resolved the same issue by changing the timeout time to greater than 30000
npx create-react-app appname -timeout=90000
In my case, none of the above mentioned worked for me. What fixed the problem was updating the npm:
npm install npm#latest -g
I did this because in the new LTS version (16.15.1) of NodeJS, npm was updated from 8.5.5 to 8.13.2.
just instead using the git-bash as a terminal use Windows powershell as a terminal it will work
in your system go to this location
C:\Users\user\AppData\Roaming
and inside that you will find a folder named "npm" delete that folder
and try npx create-react-app command again. conform it will work
My problem was similar and unlike others cleaning cache by using (npm cache clean --force) wasn't working out for me
this helped me instead
npx create-react-app my-app --use-npm
hope this does the trick for anyone who isn't getting result from cleaning cache
This worked for me
run npm install -g create-react-app (it will install create-react-app globally)
then create your app by running npx create-react-app [project-name]
This was my error:
3695 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\****\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install" "--save" "--save-exact" "--loglevel" "error" "react" "react-dom" "react-scripts"
3696 verbose node v6.10.3
3697 verbose npm v6.4.1
3698 error code Z_BUF_ERROR
3699 error errno -5
3700 error zlib: unexpected end of file
This solved the issue:
npm cache clean --force and ran create-react-app my-app

Resources