react : NPM install fails - node.js

I tried installing a package in my react app using npm, and for some reason It fails:
it shows the following error:
npm ERR! Object for dependency "#babel/generator" is empty.
npm ERR! Something went wrong. Regenerate the package-lock.json with "npm install".
npm ERR! If using a shrinkwrap, regenerate with "npm shrinkwrap".
I tried npm install to regenerate the package-lock.json but it's the same as before.

TLDR
There is some dependency error with npm, so how about clear project
Answer
First of all, How about clear node_modules and package-lock.json
rm -rf ./node_modules package-lock.json
and retry install with
npm install or npm i
and what I want to say is clear package-lock.json and node_modules. If you'd like to get more information about deleting here is the link

What version of the babel (and it's sub-modules) do you use? Show rows from your package.json file (related to babel).
Your issue possibly could be resolved by updating all babel-related modules

Related

npm ERR! Tracker "idealTree:inflate:" already exists

Every time I try to install packages using npm install, I'm getting npm ERR! Tracker "idealTree:inflate:" already exists error.
I've tried removing node_modules and clearing cache, but no luck for me.
I had the same issue when trying to update a v1 lockfile to v2 with npmv7, as it seems to be the case in your codebase, and the only way to make it work was to delete the lockfile, clear the cache and do a npm i again with the --prefer-dedupe flag.
With the package-lock rebuilt, npm i with no flag worked again, as did npm ci.
Before that, I tried npm i --legacy-peer-deps as it seemed to mimic npm v6 not installing peer dependencies and it failed too, however I think it's interesting to know this flag exists, check out the npm 7 announcement page for more clues : https://github.blog/2021-02-02-npm-7-is-now-generally-available/#peer-dependencies
TLDR
rm package-lock.json
npm cache clear --force
npm i --prefer-dedupe
npm update && npm i works for me.
Source: https://github.com/npm/arborist/issues/330#issuecomment-947803995
What worked for me was:
Remove package-lock.json and node_modules on the project root.
npm cache clear --force
npm install --legacy-peer-deps
Note: I need to install the dependencies with the flag because of the nature of the project, but it should work just by normally reinstalling the deps with npm install.
This error occurs in node v14, I upgrade to node v16.17.0 fix it
This might help others:
In my case I had a very small web app. Just a 'app.js' and a 'readme.md'. No 'package.json'. When deploying (using Azure Deployment Center) it returned with error 'Tracker "idealTree:inflate:" already exists'.
When I committed a 'package.json' file the deployment succeeded.

Get " a different version of webpack was detected higher up in the tree" error in CRA react app

I am getting this error while running npm start on my CRA app. I tried uninstalling and installing webpack. Only thing that works is,
creating a ".env" file at the root with SKIP_PREFLIGHT_CHECK=true.
`
hello#0.1.0 start C:\Users\USER\Desktop\MyReact\REACT_HOOKS\hello
react-scripts start
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:
"webpack": "4.42.0"
Don't try to install it manually: your package manager
does it automatically.
However, a different version of webpack was detected higher up in the tree:
C:\Users\USER\node_modules\webpack (version: 4.43.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 "webpack" 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 C:\Users\USER\node_modules\webpack is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls webpack in your project folder. This will tell you which other package (apart from the expected react-scripts) installed webpack.
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! hello#0.1.0 start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hello#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
`
Ok, I ran npm uninstall -g webpack it didn't do anything.
then I ran both
npm uninstall -g webpack
npm uninstall webpack
and it's not showing the error anymore.
so apparently
npm uninstall webpack
worked.
Probably the issue was caused by a manual download of webpack.
I ran npm uninstall webpack, delete package.lock.json, and then run yarn.
If you prefer npm, then instead of running yarn , you run npm install.
This will re-install webpack the right way in the dependency tree.

ng new give "npm ERR! code EINTEGRITY required sha1 but found sha512"

I am trying to create a new project in Angular 7, but getting the below error.
npm ERR! code EINTEGRITY
npm ERR! sha1-SKjl7xiAdhfuK14zwRlMNbQ5Ukw= integrity checksum failed when using sha1: wanted sha1-SKjl7xiAdhfuK14zwRlMNbQ5Ukw= but got sha512-3ds0bW0f5xtxepS3MKBqKiG2i93CTT5cG6vlfsoFDIps7lzcSnZweu3t15S90EacDpenHFyAQdpJlCaMpyLROA== sha1-X4ctB1ciOMPTjjyMj8IQXIHbMBU=. (197 bytes)
Tried every possible solution on my system, but none is helping me out.
Below is the list of solutions I have tried.
nmp install latest
clear cache
remove node_modules
force clear cache
uninstall angular and reinstall angular
These errors are sometimes due to caching or your .lock file.
So here are some steps you may follow to fix the issue.
Remove node_modules rm -rf node_modules
remove your package-lock.json file
clear the cache. npm cache clean --force
verify the cache npm cache verify
Then run npm install --registry https://registry.cnpmjs.org
If it doesn't work try to update you package manager running
npm i -g npm
Then, run npm install again.

npm start does not work. I've tried everything. I'm confused

So whenever I run npm start in my React project it gives me this error:
myapp#0.1.0 start C:\Users\AyaLe\Desktop\React\myapp react-scripts
start
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:
"webpack": "4.19.1"
Don't try to install it manually: your package manager does it
automatically. However, a different version of webpack was detected
higher up in the tree:
C:\Users\AyaLe\node_modules\webpack (version: 3.10.0)
Manually installing incompatible versions is known to cause
hard-to-debug issues.
If 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 "webpack" 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 C:\Users\AyaLe\node_modules\webpack is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls webpack in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed webpack.
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! myapp#0.1.0 start:
react-scripts start npm ERR! Exit status 1 npm ERR! npm ERR! Failed
at the myapp#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\AyaLe\AppData\Roaming\npm-cache_logs\2018-12-02T10_15_24_630Z-debug.log
Also whenever I try to install webpack-cli whenever it asks me to, it gives me another error
It looks like you have "webpack": "3.10.0" installed globally, but you need to have "webpack": "4.19.1". This is causing a conflict.
You need to do the following:
1. $npm uninstall -g webpack
2. $npm install -g webpack#4.19.1
This should solve the issue.
Alternatively, you can try deleting the node_modules folder or specifically the webpack folder in node_modules at the location:
C:\Users\AyaLe\node_modules\webpack (version: 3.10.0)
It seems that you have an incorrect version of 'webpack' installed. Check your package.json file to ensure that you have the correct 'webpack' version.
The file should look like something this :
{
... ,
"dependencies" : {
...,
"webpack" : "<version number>"
}
}
Ensure that the version number is exactly 4.19.1. This will ensure that you install the specific version of webback.
Once you change/update your package.json, try deleting node_modules/ directory and then running npm install in the same directory as your package.json is.

What NPM command should users run if the package.json file has been updated?

If I update the package.json file in an NPM workflow app, what command do existing users run to update their local node_modules dependencies?
To start using it, they run:
$ npm install
So what do they run if there is a change to the package.json file? Or do they just delete the folder and re-run the npm install command?
To re-validate the package.json and install adjusted versions or new packages:
$ npm install
The one thing this won't do is remove packages that aren't in package.json. To do that, run:
$ npm prune
If you've only changed package versions and not added new packages:
$ npm update
If you you've updated a specific package version:
$ npm update {packagename}
You should either do
npm install && npm prune
or
npm upgrade && npm prune
npm install will be faster than npm upgrade because it only updates packages in node_modules if package.json demands a newer version. npm uprade, on the other hand, will download updates to dependencies if they are available, which may include bug fixes. For ≥npm-5, you should use npm install because npm upgrade will have the side-effect of modifying any package-lock.json file which should not be modified unless if you are the package’s maintainer.
npm prune is necessary because the updates to package.json may have removed dependencies. If you do not run npm prune, packages installed by a prior version of package.json will remain in the node_modules directory that would not be there if you freshly downloaded/cloned the project and ran npm install. Due to how some packages conditionally call require() or even scan the node_modules directory, leaving packages which were removed from package.json can result in unexpected behavior.

Resources