create-react-app pausing indefinitely rather than creating a react app - node.js

I have started with react.js recently. I am currently using node -v : v12.18.1 and In order to make a react app I am using:
npx create-react-app my-app
But on running this command something unexpected happens. My command prompt gets paused indefinitely as soon as things related to npm audit are shown on the screen
Click here to see the output
I have tried waiting for an hour but nothing happened. As a result, I have to force stop the process by using Ctrl+C
I have tried the following things:
1: clearing cache using npm cache clean --force and verifying it using npm cache verify
2: I have even tried re-installing node.js and uninstalling create-react-app using npm uninstall -g create-react-app and then installing it again.
3:I have even tried using yarn and npm but a similar error was shown in them too.

Try the following command:
npm install npm#latest -g
Then close terminal.
Open a new terminal window and try npx create-react-app my_app

This problem arises due to the stalling of the command prompt. As mentioned in the question the terminal hangs and only node_modules folder is created and at the end most of the users end up terminating the process.
In order to solve this problem I opened the task manager and found a leaf symbol infront of my command propmt. However having this symbol is not a necessary condition.
Img: Showing a suspended process
Later I found that the process was suspended by the system due to some reasons.
I traced it down in the Resource monitor and resumed it.
Img:Resuming a process
Happy Hacking !!!

Related

Electron: Unable to open X display - ERROR:browser_main_loop.cc(1400) - The futex facility returned an unexpected error code

I've been trying to run this code that brings up an electron GUI and takes input from the user. I I've used the following commands to run this project in VSCode powershell terminal:
npm install
npm start
I get the following error messages in the terminal afterwards:
Error Message 1
Error Message 2
Error Message 3
I've already checked that I have the most updated packages for nodejs, npm, electron, electron-packager and electron-builder. You can see the last three in my package.json file under the devDependencies.
Package.json dev dependencies and scripts
I don't really understand what the error is saying here. From the googling I've done, it seems like this happens on WSL when you're trying to launch an electron application but I'm working off of my local machine on Windows, so I wouldn't think that a GUI should throw an error.
I can run main.js by using electron.cmd main.js but this just brings up the GUI splash from electron but the code itself doesn't seem to be executing.
The answer in my case was switching to use Yarn instead of npm. Clearing the node modules folder and running yarn install and running election ./app from the main project folder.

npm and other modules commands not working

Note: I am on Windows 10 64 bit running the latest LTS Node build.
It all started when I tried running the command npm i -g create-react-app and I get a message saying that npm is not a command.
I checked my PATH and I believe I have the proper directories in there.
I navigated to the directory of npm and tried running the command again, but it still didn't work. I found that the command npm.cmd worked in any directory. So tried running npm.cmd i -g create-react-app and that worked! I also had to use the the command create-react-app.cmd my-app, instead of create-react-app my-app. I thought I was set and I could just use those .cmd commands for the things I needed to do; however, when I tried to run the command create-react-app.cmd my-app and got this as a result:
I have looked in the file that is ran when using this command create-react-app.cmd my-app and there is no sign of npm being called. Turns out Node is being called in that file with the command below. I know this because when I run it by itself and I get the same output to the console seen in the previous image.
"node" "C:\Users\Allen\AppData\Roaming\npm\\node_modules\create-react-app\index.js" my-app
it was called in the create-react-app.cmd file like this "%_prog%" "%dp0%\node_modules\create-react-app\index.js" %*
I am at a loss. I could continue down this rabbit hole and try and find the node file that is calling npm and change it to npm.cmd but I would rather find a way to get the npm and create-react-app commands working as they are suppose to. At the very least I can just spin up a VM and work in that. It is just annoying that I can't get Node to work properly for me.
Use the command npx create-react-app my-app this will help you create react projects.
Also check the documentation : https://reactjs.org/
First check that you have npm installed on your machine and the version. You can just type npm version. Since npm version 5.2.0 npx is pre-bundled with npm, which is a CLI tool whose purpose is to make it easy to install and manage dependencies hosted in the npm registry. So try using npx create-react-app app-name. You can confirm that you are able to use npx by running which npx. If it is not available then you can install it by running npm install -g npx.

npx requires re-installation of packages every time

Currently using npx as a workaround for packages installed globally by npm as commands can never be found despite all attempts at exporting to the correct path.
npx works in finding the command but has to reinstall the package every time to find it which means multiple uses of the same package runs into problems.
I've tried using the npx --no-install but then npx runs into the same problem as I did with "command not found" being the result.
All this is attempted through the ubuntu terminal.
Solved my issue. The npx workaround was never going to work when my npm pathing was acting up. Had to reinstall npm (again) and manually create a global directory rather than use the default. Then had to export that path variable and append it to .bashrc confirm it with "source /.bashrc" and then restart the terminal. On restart everything worked fine and had no further problems with npm installs.

npm install command never ending on Angular 2 project

I work on an Angular 2 project and sometimes when I execute the npm install command, it's never ending. I can see a progress bar, once the bar is full a new npm install command is displayed on the command console, a new progress bar and so on.
For the moment I remove all the module under node_modules and restart the npm install from scratch but it is not acceptable.
Is this problem wellknown? Is there a solution?
Had that issue because of my connection before. Might be the same for you. Try disabling firewall. Or even try using some other internet connection outside a corporate or protected one.

npm ERR! Error: EPERM: operation not permitted, rename

When I execute npm install I get this error
npm ERR! Error: EPERM: operation not permitted, rename C:\projects******\node_modules\react-async-script' -> 'C:\projects*******\node_modules.react-async-script.DELETE'
I am running the cmd as administrator
I ran npm cache clean before
I made sure all the other applications don't have anything related to node_modules open
In my situation this helped:
Before proceeding to execute these commands close all VS Code instances.
clean cache with
npm cache clean --force
install the latest version of npm globally as admin:
npm install -g npm#latest --force
clean cache with
npm cache clean --force
Try to install your component once again.
I hope this fix your issue. If not, you may temporarily disable your antivirus program and try again.
For me i just closed the Code editor (VS Code) and then run the same command. And that solves the issue for me.
I got it working when tried npm install with a force option to fetch remote resources even if a local copy exists on disk. Try running
npm install --force
Updated
For some of my colleagues this solution was not working. But we tried using yarn instead of npm. It works (faster as well) without any issues all the time
yarn install [package-name]
Not package.json, but for whatever reason, my node_modules/ had become read-only. Resetting that fixed this.
If you want to avoid the --force option (which is always a better approach), I suggest making sure that you have stopped running the project, as this is usually the main reason for locking the files in almost 90% of the cases I have seen
I suggest the following steps in this order:
1- In Angular stopping ng s and in React stopping npm start usually solves this issue because usually this error happens if a development server is running the project as it locks some files & then npm can't update them thus throwing this error
2- If the above doesn't work, then try closing the code editor that has the workspace opened in it (maybe it was locking some files or something)
So try closing the code editor & running:
npm install
3- If still it doesn't work, then maybe you can try the --force option
npm install --force
I was getting that same error and according to https://github.com/Medium/phantomjs/issues/19 it could be caused by your antivirus software. I disabled mine for the duration of the install and executed "npm install" on cmd as admin and it worked.
Hope this helps.
I was getting the same thing. I didn't find this anywhere but it hit me that our VMs tend to change files to a read-only state. So I opened package.json's file properties and deselected Read-only in the "General" tab.
Steps
Go to the package.json file.
Right-click and select Properties.
In the General tab, Attributes section, deselect Read-only.
Click Apply to apply the change.
This is a typical error caused by Antivirus. There is a workaround for cases like mine, where I can't disable A/V (Company Policy).
You have to change the polyfills.js inside Npm package:
[NODE_HOME]/node_modules/npm/node_modules/graceful_fs/polyfills.js
Look for this statement:
if (process.platform === "win32") {
Inside of this statement, there is a timeout making a retry in case of error. The problem is that in some cases, after the timeout, the file is still locked by the A/V. The solution is rip out the timeout and let this statement in loop. The change with the previous code commented:
if (platform === "win32") {
fs.rename = (function (fs$rename) { return function (from, to, cb) {
var start = Date.now()
var backoff = 0;
fs$rename(from, to, function CB (er) {
if (er
&& (er.code === "EACCES" || er.code === "EPERM")
/*&& Date.now() - start < 60000*/) {
console.log("Retrying rename file: " + from + " <> " + to)
fs$rename(from, to, CB);
/*setTimeout(function() {
fs.stat(to, function (stater, st) {
if (stater && stater.code === "ENOENT")
fs$rename(from, to, CB);
else
cb(er)
})
}, backoff)*/
if (backoff < 100)
backoff += 10;
return;
}
if (cb) cb(er)
})
}})(fs.rename)
}
As Martin Kearn pointed out in a comment, closing Visual Studio resolved these npm permission issues for me. Evidently VS sometimes locks files in node_modules.
I have had this issue multiple times only in Windows
I try these in the order usually.
npm install --force
Check if node_modules is set to read-only and
remove if it is
Delete node_modules/
Check if any editor is opened
that could have access to the root folder of the project
Reboot :(
Usually trying npm install after one of those steps will resolve it.
Trying to rename a file to another filename that already exists can cause an EPERM error on Windows.
In my case, something got locked up and a quick reboot resolved it.
Closing PHPStorm fixed the issue for me.
just close the VS Code to solve the issue for me
I am using macOS catalina ,
npm init
I got error
operation not permitted, uv_cwd
in 2021, this is how you can fix this problem.
very simple:
step 1: go to parent folder
cd ../
step 2: go to your project folder again,
cd your-project-folder
That is it. It works.
I did the following:
Upgraded the npm to the latest version: npm install -g
npm#6.5.0-next.0
deleted the npm-cache folder from: c:/users/[username]/AppData/Roaming/npm-cache
Did cache clean : npm cache clean --force
Ran the npm install.
I struggeled with this too.
I finaly a solution that works fine if you use nvm:
cd ~/.nvm/versions/node/{your node version}/lib/
npm install npm
and that's it.
I'm using the terminal in VSCode and I realized I was using the bash terminal instead of the node terminal.
npm was failing for me at scandir for:
npm install -g webpack
...which might be caused by npm attempting to "modify" files that were potentially locked by other processes as mentioned here and in few other github threads. After force cleaning the cache, verifying cache, running as admin, disabling the AV, etc the solution that actually worked for me was closing any thing that might be placing a lock the files (i.e. restarting my computer).
I hope this helps someone struggling.
I had the same problem. The reason for the error is unsupported characters in the path to the file. Replaced the cyrillic in English - it helped.
For some, AppRoot\npm folder could be an issue. Sometimes the AppRoot folder is marked as network shared and thus Antivirus blocks the stuff. Follow below link for complete solution.
https://alastaircrabtree.com/fixing-intermittant-eperm-operation-not-permitted-on-npm-install/
I hope this helps.
Open the command prompt as administrator and navigate to the project location and then run npm install. it worked for me.
I remounted my window disks with the metadata flag, and instantly helped: https://devblogs.microsoft.com/commandline/chmod-chown-wsl-improvements/
after that no need anymore to use sudo for npm commands as the metadata keeps windows and linux file/directory permissions in check.
In my case running npm: v6.9.0 && node: v10.16.1 on Windows, I had to run my CLI (git bash) as administrator. Then packages were installed without any warnings/errors
I had the same problem after updating to npm to 5.4.2, npm start giving the same error for most npm commands. Some solution suggest to run it with --no-optional, but it didn't always work.
Others suggested to downgrade, but I didn't want to downgrade.
I suspected that there was a problem with the installation, not sure what it was.
So I re-updated my npm:
npm i -g npm
and worked fine since then.
run the CLI as administrator always solve the problem for me
I came here with the same error, followed all the answers here, and none solved it. I started going through my package.json removing all suspicious packages. Removing this unnecessary one solved our problem. "npm": "^8.3.2"
I think it should be related to updating npm issue. As a workaround for now you can specify npm version as 8.3.1.
- name: Install latest npm version
run: npm install --global npm#8.3.1
I'm updating Angular 13 to 14 and I faced this issue.
None of these solutions worked so I just restarted the laptop and the npm i --force worked!
It seems like one process on the background is locking the access to certain node_modules files (you may have an ng serve running somewhere, or been launched by a git bash which you close but kept running on the background)
My answer is to do npm cache clean --force first. Then run npm install -g npm#5.3.0 to install npm 5.3.0 version. for me, this npm version works with no trouble.

Resources