We Keep Coding

Need help on a react.js error that I keep on getting

Every time I try running npm start on a new project I keep on getting this error. Does anyone know or have any idea how to fix this??
There might be a problem with the project dependency tree. It is
likely not a bug in Create React App, but something you need to fix
locally.
The react-scripts package provided by Create React App requires a
dependency:
"babel-jest": "^26.6.0"
Don't try to install it manually: your package manager does it
automatically. However, a different version of babel-jest was detected
higher up in the tree:
D:\node_modules\babel-jest (version: 24.9.0)
Manually installing incompatible versions is known to cause
hard-to-debug issues.
If you would prefer to ignore this check, add
SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That will
permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact
order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem. If this has
not helped, there are a few other things you can try:
If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if D:\node_modules\babel-jest is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls babel-jest in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-jest.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file
in your project. That would permanently disable this preflight check
in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-)
We hope you find them helpful!
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
react-portfolio#0.1.0 start: react-scripts start npm ERR! Exit
status 1 npm ERR! npm ERR! Failed at the react-portfolio#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!
C:\Users\smaso\AppData\Roaming\npm-cache_logs\2021-01-26T22_50_48_484Z-debug.log

I also face this problem. Simple solution of this problem is:
1)create .env file.
2) add SKIP_PREFLIGHT_CHECK=true in the file.
3) npm start

If this fails to work, create a .env file in the root directory of your project and add the following line
SKIP_PREFLIGHT_CHECK=true

just go to your project's root directory and delete node_module folder and npm start your project.

Delete and redownload node modules and run application again

To fix the dependency tree, try following the steps below in the exact order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if ./babel-jest is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls babel-jest in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-jest.

Seems like you created the react project using create-react-app and installed jest using the following command.
yarn add --dev jest babel-jest #babel/preset-env #babel/preset-react react-test-renderer
But in the documentation it says just to run the following command if you are using create-react-app
yarn add --dev react-test-renderer
[See the documentation][1]https://jestjs.io/docs/tutorial-react
This worked for me.

I used the following command to uninstall jest npm uninstall jest in the root project folder (not the client) and then used the react scripts start command npm start and it worked

removing jest.config.js and uninstall ts-jest solved my problem

package-lock.json not updated after removing a package from package.json?

If i manually add a package to package.json and then run npm install, my package-lock.json gets updated with that new package's dependencies.
However, if i then manually delete that package from package.json from npm install, that package's dependencies are not removed from package-lock.json.
So - package-lock.json only gets modified when adding/updating packages in package.json? Not when removing?

This is a known issue with npm.
See issue :package-lock.json file not updated after package.json file is changed
" For now I'm working around it by changing my npm install command to rm -f package-lock.json && npm install. Obviously, that's not an elegant solution, and somewhat defeats the purpose of having a lockfile in the first place."
rm -f package-lock.json && npm install
This is supposed to be fixed in : https://github.com/npm/npm/pull/17508
See article : https://medium.com/coinmonks/everything-you-wanted-to-know-about-package-lock-json-b81911aa8ab8 for a better understanding.

Removal of package-lock.json should be only done in case of corrupted lock file. To remove package you should just use npm cli (it will update lock file)
npm uninstall <package>
This is a good explanation. https://stackoverflow.com/a/54127283/5040275

From the NodeJs docs
The package-lock.json sets your currently installed version of each package in stone, and npm will use those exact versions when running npm install.
NPM by default will read the package-lock.json file.
Therefore, in the first scenario, npm is reading the package entry from package.json since that's the only file which has an entry of the particular package.
Whereas in the second scenario, it is reading it from package-lock.json, as is its default behaviour

'react-scripts' is not recognized as an internal or external command

I've got a maven project, within which is JavaScript project cloned as a git sub-module. So the directory structure looks like mavenapp/src/main/javascript/[npm project files]
Inside my package.json, the test looks like this:
"test": "react-scripts test --env=jsdom",
but when I try to run npm test, it says
'react-scripts' is not recognized as an internal or external command,
Interestingly, when I clone the javascript project independently I don't get this error. I've tried re-running npm install.
NPM version: 5.5.1
Node.js version: 9.3.0

It is an error about react-scripts file missing in your node_modules/ directory at the time of installation.
Check your react-script dependency is avaliable or not in package.json.
If not available then add it manually via:
npm install react-scripts --save

If react-scripts is present in package.json, then just type this command
npm install
If react-scripts is not present in package.json, then you probably haven't installed it. To do that, run:
npm install react-scripts --save

Try:
rm -rf node_modules && npm install
Wiping node_modules first, often tends to fix a lot of weird, package related issues like that in Node.

Running these commands worked for me:
npm cache clean --force
npm rebuild
npm install

In my situation, some problems happened with my node package. So I run npm audit fix and it fixed all problems

2023 answer: simply remove node_modules folder and run
npm install
or:
yarn
(depends on you're using npm or yarn)
it worked for me!
no need to do more!!!
It waste a lot of my time until I discover this, I got headache...

Faced the same problem, although I am using yarn.
The following worked for me:
yarn install
yarn start

To avoid this issue to re-occur or you face this issue whenever anyone downloads your project fresh.
It's better to add this in dev dependencies using this command:
npm install react-scripts --save-dev
It will get added like this.
"devDependencies": {
"react-scripts": "^4.0.3"
}
Do Commit and push your code.

Running the npm update command solved my problem.

To rectify this issue follow the following steps
run npm install
then run npm start
This worked fine for me

For Portable apps change
package.json
as follows
"scripts": {
"start": "node node_modules/react-scripts/bin/react-scripts start",
"build": "node node_modules/react-scripts/bin/react-scripts build",
"test": "node node_modules/react-scripts/bin/react-scripts test",
"eject": "node node_modules/react-scripts/bin/react-scripts eject"
}

react-scripts should be listed as a dependency when you run npx create-react-app your-app, but for some reason, it gets this error. I will list some steps that I followed that may help you fix this error:
First, check at your React package.json if there is react-scripts or not:
for example, you should see:
"dependencies": {
...
"react-scripts": "4.0.3",
...
},
If it's already there, now try to re-install your dependencies with npm i
If you still get the same error, try to remove your node_modules with rm -rf node_modules/, then re-install your dependencies with npm i
BUT if the package react-scripts wasn't in your package.json file, you should install it by your package manager like:
npm i react-scripts
then try to start your app with npm start

This is how I fix it
Check and Update the path variable (See below on how to update the path variable)
Delete node_modules and package-lock.json
run npm install
run npm run start
if this didn't work, try to install the nodejs and run repair
or clean npm cache npm cache clean --force
To update the path variable
press windows key
Search for Edit the system environmental variable
Click on Environment Variables...
on System variable bottom section ( there will be two section )
Select Path variable name
Click Edit..
Check if there is C:\Program Files\nodejs on the list, if not add this

I uninstalled my Node.js and showed hidden files.
Then, I went to C:\Users\yourpcname\AppData\Roaming\ and deleted the npm and npm-cache folders.
Finally, I installed a new version of Node.js.

I faced the same issue. I solved it using npm audit fix --force

I had the same issue. I did everything which suggested here. but nothing worked. I had installed react-scripts in my node_modules also used cache but all in vain. then I just npx create-react-app and moved all my code into this new folder and all worked.
npx create-react-app myapp

As for me i managed to fix this issue by install this :
npm audit fix --force
and it work after that.

This is not recommended, so plz don't down arrow, but for troubleshooting..
react-scripts is not recognized as an internal or external command is related to npm.
I would update all of my dependencies in my package.json files to the latest versions in both the main directory and client directory if applicable.
You can do this by using an asterisk "*" instead of specifying a specific version number in your package.json files for your dependencies.
For Example:
"dependencies": {
"body-parser": "*",
"express": "*",
"mongoose": "*",
"react": "*",
"react-dom": "*",
"react-final-form": "*",
"react-final-form-listeners": "*",
"react-mapbox-gl": "*",
"react-redux": "*",
"react-responsive-modal": "*",
}
I would then make sure any package-lock.json were deleted and then run npm install and yarn install in both the main directory and the client directory as well if applicable.
You should then be able to run a yarn build and then use yarn start to run the application.

Use git bash or windows cmd with admin rights to run npm install while fixing this issue, running these commands inside the editor's terminals doesn't help.

first run:
npm ci
then:
npm start

In my case, the problem had to do with not having enough file permissions for some files the react-scripts package installation was going to write to. What solved it was running git bash as an administrator and then running npm install --save react-scripts again.

I have tried many of the solutions to this problem found on line, but in my case nothing worked except for reinstalling NVM for Windows (which I am using to manage multiple Node versions). In the installer, it detects installed Node versions and asks the user if they wish for NVM to control them. I said yes and NVM fixed all PATH issues. As a result, things worked as before. This issue may have multiple causes, but corrupted PATH is definitely one of them and (re)installing NVM fixes PATH.

This is rather old question but this might be of some help for future reference. Delete node_modules folder and run npm install again. Worked for me.

In my case , I edited my files on Linux where I had node v14.0.5 installed, when I rebooted to Windows where I had node v14.0.3 I got the same error. So I updated the node version on windows and all went fine for me.

had similar issue.. i used yarn to fix it.
i noticed that react-scripts was not found in my node modules so i decided to download it with npm but i seem to be failing too. so i tried yarn ( yarn add react-scripts) and that solved the nightmare! Hope this work for you as well. Happy debuging folks.

For me, I just re-installed the react-scripts instead of react-scripts --save.

Started getting this error in Azure DevOps yesterday out of nowhere when running npm run build:
'react-scripts' is not recognized as an internal or external command, operable program or batch file.
However when looking at npm ci that completed it was full of errors like:
FetchError: Invalid response body while trying to fetch
https://registry.npmjs.org/#babel%2fcompat-data: ENOENT: no such file
or directory, lstat
'D:\a\1.npm_cacache\content-v2\sha512\58\0b\dc7dce0b33e86d97736b3c419005951e32af28dda3f5b8c746f16d53d4baed1dc2fd2493e9310f744696008400bf8c91ca84f9fb3ebf541ba93a541b144a'
When commenting out the cache everything started working again:
npm_config_cache: $(Pipeline.Workspace)/.npm
- task: Cache#2
inputs:
key: 'npm | "$(Agent.OS)" | $(clientApp)\package-lock.json'
restoreKeys: |
npm | "$(Agent.OS)"
path: $(npm_config_cache)
displayName: Cache npm
The weird thing is that it has worked for over a year up until yesterday (2021-12-02) and we use the exact same code for caching as Microsoft has documented.
https://learn.microsoft.com/en-us/azure/devops/pipelines/release/caching?view=azure-devops#nodejsnpm
Noting Degraded or Unhealthy on Azure DevOps Status
https://status.dev.azure.com/

I had the same problem and I tried the above thing, but that did not work some how. So,
I just typed yarn. And it went.

When I make a new project using React, to install the React modules I have to run "npm install" (PowerShell) from within the new projects ClientApp folder (e.g. "C:\Users\Chris\source\repos\HelloWorld2\HelloWorld2\ClientApp"). The .NET core WebApp with React needs to have the React files installed in the correct location for React commands to work properly.

This worked for me:
Go to the project folder in CLI and type npm install.Go for a similar command if
using yarn etc.
Then type npm start if you are using Npm. Go for a similar command if using yarn
etc.
The file starts working

Cannot install my own npm package

I've been developing a later-to-be-release Open Source project with Node as a CLI tool. The CLI itself works great I only need to test if it works while on another project, so for that I installed the projects globally npm install -g without errors, but for the life of me I can't use the CLI.
I get the following error:
The odd thing is that the directory and file does exist in the global npm folder:
This is the project's package.json:
Am I not understanding how making a npm/node CLI works? What I'm missing?
EDIT 1:
This is my index.js file:
And this is the commander.js file:
EDIT 2:
After creating a test project as #AngYC suggested I could use the test cli successfully, while inspecting the difference I found this. Inside C:\Users\Ivan\AppData\Roaming\npm the .cmd of both projects are quite different:
EDIT 3 (Solution):
After fiddling around I found out that the file that really needed the shebang (#!/usr/bin/env node) was only index.js file and not the commander.js one. Removing the shebang in that file solved the problem

You may want to try to link your local package to your global executable list.
https://docs.npmjs.com/cli/link
All you have to do is run npm link in the folder you got your tool and it should make the command available globally.

Try to uninstall cli run npm rm -g cli or sudo npm rm -g cli. Then you run: npm install cli -g
If the problem persist, you might want to remove you npm package globally, probably there might be some conflicting things running.
Type this: %appdata% (either in explorer, run prompt, or start menu).
You can simply remove all globally installed npm packages by deleting the contents of:
C:\Users\username\AppData\Roaming\npm
Then you might also want to clear all the your cache run npm cache clear or npm cache clear --force as the case might be.
Then you reinstall all your packages that were install globally again.
If problem still persist, check this:
When you run npm root -g, it yields C:\Users\<username>\AppData\Roaming\npm\node_modules, or even, you should check your path maybe the executable binaries and .cmd files end up in C:\Users\<username>\AppData\Roaming\npm instead of C:\Users\<username>\AppData\Roaming\npm\node_modules, you will need to add that path to the PATH env. variable.
I hope this resolves your issue.

npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Nuwanst\package.json'

I just want to install socket.io to my project which is located on 3.chat folder. But when I run following command it shows following Warnings.And its not created a node_modules directory inside my project folder. How to fix this?
C:\Users\Nuwanst\Documents\NodeJS\3.chat>npm install socket.io
C:\Users\Nuwanst
`-- socket.io#2.0.3
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Nuwanst\package.json'
npm WARN Nuwanst No description
npm WARN Nuwanst No repository field.
npm WARN Nuwanst No README data
npm WARN Nuwanst No license field.

If you already have package-lock.json file just delete it and try again.

Have you created a package.json file? Maybe run this command first again.
C:\Users\Nuwanst\Documents\NodeJS\3.chat>npm init
It creates a package.json file in your folder.
Then run,
C:\Users\Nuwanst\Documents\NodeJS\3.chat>npm install socket.io --save
The --save ensures your module is saved as a dependency in your package.json file.
Let me know if this works.

Make sure you are on the right directory where you have package.json

You need to make sure that the package.json file exist in the app directory. Run this command where package.json file exists.
For more explanation, I run npm start in c:\selfPractice, but my package.json is in c:\selfPractice\frontend. When I switch to c:\selfPractice, it works.

NOTE: if you are experiencing this issue in your CI pipeline, it is usually because npm runs npm ci instead of npm install. npm ci requires an accurate package-lock.json.
To fix this, whenever you are modifying packages in package.json (e.g. moving packages from devDependencies to Dependencies like I was doing) you should regenerate package-lock.json in your repository by running these commands locally, and then push the changes upstream:
rm -rf node_modules
npm install
git commit package-lock.json
git push

If your folder already have package.json
Then,
Copy the path of package.json
Open terminal
Write:
cd your_path_to_package.json
Press ENTER
Then Write:
npm install
This worked for me

finally, I got a solution if you are getting:-
**npm WARN tar ENOENT: no such file or directory,.......**
then it is no issue of npm or its version it is os permission issue to resolve this you need to use below command:-
sudo chown -R $USER:$USER *
additional
sudo chmod -R 777 *
then run:-
sudo npm i

If you're trying to npm install on a folder that's being rsync'd from somewhere else, remember to add this to your rsync --exclude
yourpath/node_modules
Otherwise, NPM will try to add node_modules and rsync will remove it immediately, causing many npm WARN enoent ENOENT: no such file or directory, open errors.

Delete package.json and package-lock.json file
Then type npm init
after that type npm install socket.io --save
finally type npm install
It works for me

update version in package.json is working for me

I just experienced this error but on looking for the answer online here on stackoverflow I found the answer in the process so I decided to share it also , If this error occurs on a react project you are working on and when you run npm start make sure to change directory into the directory that has react installed in it and it will start working

if your node_modules got installed in say /home/UserName/ like in my case,
your package-lock.json file will also be there. just delete this file, go back to your app folder and run npm init and then npm install <pkgname> (e.g express) and a new node_modules folder will be created for your.

I had this in a new project on Windows. npm install had created a node_modules folder for me, but it had somehow created the folder without giving me full control over it. I gave myself full control over node_modules and node_modules\.staging and it worked after that.

Seems you have installed express in root directory.Copy path of package.json and delete package json file and node_modules folder.

I had the same problem, I resolved by removing all insignificant lines in packages.json e only left "name", "version", "description", "devDependencies", "dependencies", "resolutions". and the error was gone.

the file path you ran is wrong. So if you are working on windows, go to the correct file location with cd and rerun from there.