I'm relatively new to Node development and I'm trying out various modules, frameworks, etc.. I'm on macOS Catalina. I've changed my NPM root and $PATH while trying to get things to work, and I think I broke something, though I'm not exactly sure what. My issue is very specifically with NPM, which is having a persistent problem running installed modules both locally and globally. When I try to install a dev tool like Nodemon or a framework like Electron, I get error codes like:
sh: electron: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! electron-quick-start#1.0.0 start: `electron .`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the electron-quick-start#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I've consulted a lot of resources and a lot of questions on this site, but I'm not experienced enough to accurately troubleshoot this issue and identify what's going on. While I'm shooting in the dark, I may be fixing one thing and breaking another, so I'm coming here to see if I can get a comprehensive answer.
I'll add that I've found a few workarounds, if this makes the issue clearer at all. I can get some modules (in this example Nodemon) to run by adding this "dev" script to the package.json:
"scripts": {
"dev": "node ./node_modules/.bin/nodemon server.js"
}
So I can access local project modules by specifying the path of the Module, but I can't just say "nodemon server.js", either in the dev script or from the command line, where it should have been installed globally. If I look in the specified npm -g root folder, the packages I'm trying to run are definitely in there, so it's not an installation issue.
Any guidance y'all have is greatly appreciated, as I don't know what to make of all this.
There are 2 installation style, local and global, on npm.
It is highly recommended to not mix both on the same environment, at least for a given module.
Global installation
e.g. npm install -g <module name>
The executable(s) provided by the module you have installed will be added into the place which PATH environment variable includes.
You can then use this command everywhere (here electron or nodemon), but you cannot use different versions for each project in your environment. You can isolate this behavior with nvm, or better in a container.
Local installation
e.g. npm install --save <module name>
The executable(s) will be installed into the project node_modules directory and saved in the package.json.
You can then use different versions of the module for each project and easily manage it with package.json.
PATH environment variable does not include there, so you have to use ./node_modules/.bin/<command>, as you did in your workaround, or $(npm bin)/<command>.
You can also use any command provided by the module in npm-scripts even if it's a local install because npm adds ./node_modules/.bin to PATH before npm run-script command.
See also: https://docs.npmjs.com/cli/v7/commands/npm-run-script
Related
> new-app#0.1.0 start C:\Users\sachin\reactjs\new-app
> 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:
"eslint": "^6.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:
C:\Users\sachin\node_modules\eslint (version: 7.10.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:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. 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:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
6. Check if C:\Users\sachin\node_modules\eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed eslint.
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! new-app#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the new-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! C:\Users\sachin\AppData\Roaming\npm-cache\_logs\2020-10-09T06_26_24_453Z-debug.log
If nothing works, try deleting node_modules in one directory back from your project.
Somehow I had node_modules in user/devdirectory, not in user/devdirectory/project
The error I'm getting is like this:
vaibhav#Knighthood MINGW64 ~/Desktop/Coding NInja/tool (master)
$ npm start
> tool#0.1.0 start C:\Users\vaibhav\Desktop\Coding NInja\tool
> 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\vaibhav\node_modules\webpack (version: 4.44.1)
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:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
4. 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:
5. 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.
6. Check if C:\Users\vaibhav\node_modules\webpack is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. 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! tool#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the tool#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\vaibhav\AppData\Roaming\npm-cache\_logs\2020-09-01T10_23_38_476Z-debug.log
I have tried to fix the dependency tree by the suggested steps:
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.
But I'm still facing the same error.
My system configurations are:
Node -v : 12.18.3
npm -v : 6.14.8
OS : Windows 10 pro v2004 H1 x64
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.
So I'm trying to make a new angular app for the first time, and I installed it using npm i -g #angular/cli. When I try to make a new app using npm run ng new app, it gives me this error:
npm ERR! path E:\ddii\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'E:\ddii\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users...\AppData\Roaming\npm-cache_logs\2018-09-10T20_22_50_118Z-debug.log
In short, you are running the command incorrectly. Remove the npm run from the front of your command, and it should work.
When you say npm run blah, npm does a lookup in your package.json for a script called blah or in your case ng. So... if you are running npm run ng new app, npm wants there to be a package.json in your current directory, and in that package.json, npm expect a script called ng. So if you don't have a package.json in your current dir, then you are going to get an error.
Instead, close your terminal, and open a new terminal and run simply ng new app.
I struggled to find this answer myself, as the other answers on this question do not address the real underlying issue.
All the other answers suggest to install ng GLOBALLY using (npm i -g ...), with the side effect that a symlink to ng will be on your PATH.
Based on OP's question, I do concede he was most likely attempting to scaffold a new Angular app from the GLOBALLY installed ng. So this handles 90% of people's questions, and is all fine and nice.
I, however, want to use the LOCALLY INSTALLED ng, which is why I have an npm-script in my package.json for it:
{
...
"scripts": {
...
"ng": "ng",
...
}
If this describes your use case like it does mine, then read on.
npm run ng update succeeds for me, whereas other more complex commands with more arguments—including command-line switches—fail outright (npm run ng -- update #angular/cli --migrate-only tslint-version-6).
The answer lies in that you must delimit the start of arguments being passed to npm run-script with -- (see https://stackoverflow.com/a/14404223/1438576):
npm run ng -- update #angular/cli --migrate-only tslint-version-6
So in OP's case, assuming he already had a locally-installed copy of ng with a package.json (which I admit is doubtful), he could have done:
npm run ng -- new app
Anyway, hope this helps others.
If you want to run it without the npm run ..., you need to install ng globally, I would do npm install -g #angular/cli, however I'm running linux, for windows I've found this thread ng is not recognized as an internal or external command
It should help you install a global version of angular-cli, you'll basically do two things:
Install globally angular-cli (if you don't have it).
Make sure it's in your environment variable's PATH.
Check the question answers, details are there.
Could help for future references
At least for me this work.
Sometimes, the reference to the file ng.cmd (in case of Win users) is not well formed and you have to call it and pass the arguments directly
e.g.
< path-where-ng.cmd-file-is-located >\ng.cmd new app
Running calling ng.cmd file directly
It says: ' "ng" is not recognized as an internal or external command, operable program or batch file.'
And it works even if you do not have admin permissions for any reason
This is probably a Windows specific issue but I haven't found any information when googling this issue. I had been using ionic framework which relies on Cordova (or Phonegap). However, the problem is not specific to any of these packages. I see this error quite often. So, the error is when I run a command such as the following:
npm install -g cordova
However, I could substitute various other packages and get the same error. I'll paste the snippet (very brief) below of the error message. What is strange is that I had an ionic project working in that directory earlier. Then today it told me that ionic could not be found. My hunch is that this is a different issue than the main issue I am describing here.
I installed git bash so I do have a linux-like environment that I could try. I would just select Git Bash for a bash window with various bash commands. If there is an easier way to fix this for Windows users, please let me know. I have seen courses on Pluralsight where the instructors seem to be happily using npm with no problems. Also, when I use yeoman, I also at some point, in many cases, get the same error.
The error is
npm ERR! Failed to parse json
npm Unexpected token '\u0000' at 1:1
npm ERR!
npm ERR! ^
npm ERR! File: c:\Users\Bruce\AppData\Roaming\npm-cache\amdefine\1.0.0\package\package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! This is not a bug in npm
npm ERR! Tell the package author to fix their package.json file. JSON.parse.
Thanks in advance for any help/advice,
Bruce
Via this question on SO it could be that you just have to do:
npm cache clean.
But, also try the other methods suggested there like adding the registry option:
npm install <packagename> --registry http://registry.npmjs.org/.
Or, if you've been mingling with the package.json file by yourself, check if it's valid.