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.

Answer 1

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

Answer 2

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