Windows 10 -> 'npx create-react-app myapp' command does not work because of whitespace username in file path

Question

I ran into some issues when trying to install a react app on my Windows 10 via npx create-react-app appname, receiving the following error message:

Error: EPERM: operation not permitted, mkdir 'C:\Users\Daniel'
TypeError: Cannot read property 'loaded' of undefined
    at exit (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:98:27)
    at errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:216:3)
    at C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js:77:20
    at cb (C:\Program Files\nodejs\node_modules\npm\lib\npm.js:225:22)
    at C:\Program Files\nodejs\node_modules\npm\lib\npm.js:263:24
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:83:7
    at Array.forEach (<anonymous>)
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:82:13
    at f (C:\Program Files\nodejs\node_modules\npm\node_modules\once\once.js:25:25)
    at afterExtras (C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:173:20)
C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:98
  var doExit = npm.config.loaded ? npm.config.get('_exit') : true
                          ^

TypeError: Cannot read property 'loaded' of undefined
    at exit (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:98:27)
    at process.errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:216:3)
    at process.emit (events.js:198:13)
    at process._fatalException (internal/bootstrap/node.js:496:27)
Install for create-react-app@latest failed with code 7

Solution:

I started some research and finally found out, that this issue emerges if your Windows Username has a whitespace included e.g. "C:\Users\Firstname Lastname\AppData\Roaming\npm-cache"

After some tedious hours of running in circles and re-reading multiple GitHub-threads on this issue, I finally found a patch, that worked for me: run npm config set cache "C:\Users\Firstname~1\AppData\Roaming\npm-cache" --global from your terminal, it will replace the whitespace and everything after it with ~1, which seems to solve the issue

The source, where I found this solution is https://github.com/zkat/npx/issues/146#issuecomment-384019497

I am posting this comment here in order to save anyone the chore of working through the gazillions of circularly linked github threads.

Ömürcan Cengiz · Accepted Answer · 2021-03-15T08:32:47.487

34

SOLUTION

if you want to use current path that has space in username "C:\Users\Firstname Lastname\AppData\Roaming\npm-cache" you can replace the string after space with "~1"

npm config set cache "C:\Users\Firstname~1\AppData\Roaming\npm-cache" --global

edited Mar 15 '21 at 08:32

answered Oct 12 '19 at 13:25

Ömürcan Cengiz

2,085
3
22
28

ok, sorry and thanks for the feedback, will do better next time ;) – Daniel Oct 12 '19 at 17:29
What about a name with multiple spaces? – Meir Keller Aug 04 '20 at 14:39
4

I tried this method but it did not work, it again shows error like `Error: EPERM: operation not permitted, mkdir 'C:\Users\Firstname~1'` and so on. – Vikum Dheemantha Dec 05 '20 at 19:27

score 21 · Answer 2 · edited Jun 20 '20 at 09:12

21

If you have still troubles with this problem you can try this:

I was able to fix this in Windows by creating a directory junction to my users folder that didn't have a space in it. You can run a command like this in an administrative powershell:

cmd /c mklink /J "C:\Users\myname" "C:\Users\My Name"

You can then use this junction as if it were your real user directory:

npm config set cache C:\Users\myname\AppData\Roaming\npm-cache

npm config set prefix C:\Users\myname\AppData\Roaming\npm

(the above should update your user .npmrc file)

Source

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 17 '20 at 07:49

Ashylen

430
3
9

2

This is the only thing that worked for me. Thanks! – Bonnev Jul 09 '21 at 16:15
1

This worked great. Sad that this issue has been going on as far back as 2019. We get it, the Node folks love Mac and Linux, but seriously some of us use Windows. – Alfawan Aug 28 '21 at 21:12
That worked for me too where Firstname~1 doesn't work – Damien STEPHAN Oct 27 '21 at 16:41
1

Same for me @Damien STEPHAN. Accepted answer didn't work, but this one did. Thanks Ashylen. – isaacsan 123 Dec 02 '21 at 11:54

score 0 · Answer 3 · answered Feb 03 '21 at 19:15

Here is how I solved this:

Delete npm folders from %APPDATA%
Set both prefix and cache to paths without spaces. Be aware that using prefix and cache paths out of your user's folder may expose your system to security risks.

    npm config set prefix F:\PathWithoutSpace\
    npm config set prefix F:\PathWithoutSpace\ --global
    npm config set cache F:\PathWithoutSpace\cache
    npm config set cache F:\PathWithoutSpace\cache --global

Re-install packages like yarn and creat-react-app
Add F:\PathWithoutSpace\ to your User's Path environment variable, which already includes an expanded version of %APPDATA%\npm, which will no longer be required.

I think it will be worth notifying the user of these problems when they install the NodeJS.

score 0 · Answer 4 · answered Feb 08 '22 at 12:42

0

I did update the node version to 16.13.2 which solved the problem.

answered Feb 08 '22 at 12:42

Saeed Sharman

765
5
24

score 0 · Answer 5 · answered Mar 19 '22 at 06:24

0

Change the NPM cache path that is not having the whitespace in the folder name. In my case I used a folder in my root of C drive .

npm config set cache C:\tmp\nodejs\npm-cache --global

answered Mar 19 '22 at 06:24

Kavishka Hirushan

51
4

score 0 · Answer 6 · answered Oct 14 '22 at 16:53

0

In my case problem is that I am using node version of 14.18.2. When I upgrade it to node version of 16.17.1.Then problem is resolved.

answered Oct 14 '22 at 16:53

Arpit Rituraj

1

Windows 10 -> 'npx create-react-app myapp' command does not work because of whitespace username in file path

6 Answers6

Linked