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

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:UsersDaniel'
TypeError: Cannot read property 'loaded' of undefined
    at exit (C:Program Filesnodejsnode_modulesnpmlibutilserror-handler.js:98:27)
    at errorHandler (C:Program Filesnodejsnode_modulesnpmlibutilserror-handler.js:216:3)
    at C:Program Filesnodejsnode_modulesnpmbinnpm-cli.js:77:20
    at cb (C:Program Filesnodejsnode_modulesnpmlibnpm.js:225:22)
    at C:Program Filesnodejsnode_modulesnpmlibnpm.js:263:24
    at C:Program Filesnodejsnode_modulesnpmlibconfigcore.js:83:7
    at Array.forEach (<anonymous>)
    at C:Program Filesnodejsnode_modulesnpmlibconfigcore.js:82:13
    at f (C:Program Filesnodejsnode_modulesnpmnode_modulesonceonce.js:25:25)
    at afterExtras (C:Program Filesnodejsnode_modulesnpmlibconfigcore.js:173:20)
C:Program Filesnodejsnode_modulesnpmlibutilserror-handler.js:98
  var doExit = npm.config.loaded ? npm.config.get('_exit') : true
                          ^

TypeError: Cannot read property 'loaded' of undefined
    at exit (C:Program Filesnodejsnode_modulesnpmlibutilserror-handler.js:98:27)
    at process.errorHandler (C:Program Filesnodejsnode_modulesnpmlibutilserror-handler.js:216:3)
    at process.emit (events.js:198:13)
    at process._fatalException (internal/bootstrap/node.js:496:27)
Install for <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="472435222633226a35222624336a263737072b2633223433">[email protected]</a> 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:UsersFirstname LastnameAppDataRoamingnpm-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:UsersFirstname~1AppDataRoamingnpm-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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

SOLUTION

if you want to use current path that has space in username "C:UsersFirstname LastnameAppDataRoamingnpm-cache"
you can replace the string after space with "~1"

npm config set cache "C:UsersFirstname~1AppDataRoamingnpm-cache" --global

Method 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:Usersmyname" "C:UsersMy Name"

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

npm config set cache C:UsersmynameAppDataRoamingnpm-cache

npm config set prefix C:UsersmynameAppDataRoamingnpm

(the above should update your user .npmrc file)

Source

Method 3

Here is how I solved this:

  1. Delete npm folders from %APPDATA%
  2. 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:PathWithoutSpacecache
    npm config set cache F:PathWithoutSpacecache --global
  1. Re-install packages like yarn and creat-react-app
  2. 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.

Method 4

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

Method 5

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:tmpnodejsnpm-cache --global


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x