Create-react-app: Create react app won't work on Windows if there are spaces in your username

Created on 25 Feb 2019 · 63Comments · Source: facebook/create-react-app

tl;dr - https://github.com/zkat/npx/issues/100 is an issue for create-react-app since all Windows 10 users with a space in their name won't be able to use create-react-app (unless they rename their user account home directory, a heavy process). It is not a friendly experience to dig around the internet to find the above-mentioned npx bug. Details below.

Is this a bug report?

Yes. Bug is with downstream dependency (npx and node) but it directly affects create-react-app.

Did you try recovering your dependencies?

No, because the bug happens even before I can start anything.

Which terms did you search for in User Guide?

"windows"

Environment

Windows 10 Professional

When I try to collect platform information, here is what I get (inside cmdr):

C:\Users\Keir Mierle
λ npx create-react-app --info
Error: EPERM: operation not permitted, mkdir 'C:\Users\Keir'
TypeError: Cannot read property 'get' of undefined
    at errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205:18)
    at C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js:78:20
    at cb (C:\Program Files\nodejs\node_modules\npm\lib\npm.js:228:22)
    at C:\Program Files\nodejs\node_modules\npm\lib\npm.js:266: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)
    at C:\Program Files\nodejs\node_modules\npm\node_modules\mkdirp\index.js:47:53
C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205
  if (npm.config.get('json')) {
                 ^

TypeError: Cannot read property 'get' of undefined
    at process.errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205:18)
    at process.emit (events.js:189:13)
    at process._fatalException (internal/bootstrap/node.js:494:27)
Install for create-react-app@latest failed with code 7

Steps to Reproduce

I posted these steps to the npx repository upstream bug:
https://github.com/zkat/npx/issues/100#issuecomment-466825507

Steps:

Be on Windows 10, with a username that has spaces (like "Jane Doe") instead of without spaces (like "janedoe").
Remove any old node installs or caches. In my case, this machine has never had node.
Install Node 10.15.1 LTS from the main Node site .
They try running npx create-react-app my-app; it fails with the mentioned EPERM error (below).
They try running npm init react-app my-app, alternate command mentioned on the Create React App README; same error (below).
The user spends 30 minutes tracking down this issue in GitHub.

This is the error:

c:\t
λ npx create-react-app my-app
Error: EPERM: operation not permitted, mkdir 'C:\Users\Keir'
TypeError: Cannot read property 'get' of undefined
    at errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205:18)
    at C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js:78:20
    at cb (C:\Program Files\nodejs\node_modules\npm\lib\npm.js:228:22)
    at C:\Program Files\nodejs\node_modules\npm\lib\npm.js:266: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)
    at C:\Program Files\nodejs\node_modules\npm\node_modules\mkdirp\index.js:47:53
C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205
  if (npm.config.get('json')) {
                 ^

TypeError: Cannot read property 'get' of undefined
    at process.errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205:18)
    at process.emit (events.js:189:13)
    at process._fatalException (internal/bootstrap/node.js:494:27)
Install for create-react-app@latest failed with code 7

All Windows users with a space in their filename will encounter this issue. It looks like there was some movement at https://github.com/zkat/npx/pull/181 , but then the work tailed off and wasn't merged. Perhaps if the proper fix can't get completed anytime soon, a more informative message could get printed when the problem is detected.

Expected Behavior

Create react app creates an app.

Actual Behavior

The error message shown above.

Reproducible Demo

Since this is an OS issue, just get Windows 10, make a user with spaces in the name like "Jane Doe", then try doing the first 3 commands in the create react app guide.

claimed starter good first issue bug underlying tools

Source

keir

👍25 👀2 😕1

Most helpful comment

Today I encountered a similar issue with npx create-react-app my-app(mkdir failed).

Reason for my error

I had space in my user name folder(ex: Abc Xyz) and thus "npx" couldn't refer to it correctly (It only read Abc, and not Xyz).
I am using VS Code for React, and it didn't had the permission to create new directory

How I fixed it

Opened VS Code with Administrator rights.(fixed permission issue)
Instead of using "npx" I tried the following:

--> npm install -g create-react-app

--> create-react-app my-app

And that got executed successfully.

Hope this helps.

malhar234 on 1 Jun 2019

👍191 ❤50 🎉36 🚀30 😄28 👀10

All 63 comments

It sounds like all we can do is display a more helpful error message in this case (until the bug is fixed in npm/npx). Would you be interested in submitting a PR to do that?

Also, do you know what happens if you try this with yarn? I don't have a Windows 10 machine to test on. If yarn works we could suggest that as a workaround.

iansu on 25 Feb 2019

I can confirm that pretty much the same thing happens with yarn. Looks like this:

$ yarn create react-app my-app
yarn create v1.13.0
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-react-app
'C:\Users\Jane' is not recognized as an internal or external command,
operable program or batch file.
error Command failed.
Exit code: 1
Command: C:\Users\Jane Doe\AppData\Local\Yarn\bin\create-react-app
Arguments: my-app
Directory: C:\Projects
Output:

info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.

pnhoffmann on 25 Feb 2019

👍14 ❤1

Thanks for investigating that. It's too bad we can't offer Yarn as a workaround. Is there an open issue related to this in Yarn? If not could you create one?

iansu on 25 Feb 2019

There's no issue for this created on Yarn. I'll create one

Kacppian on 26 Feb 2019

@Kacppian Thanks. Please link to the issue here.

Would anyone like to make a PR to add a friendlier error message in Create React App?

iansu on 26 Feb 2019

I'd love to!

Kacppian on 26 Feb 2019

👍1

Great! It's all yours.

iansu on 26 Feb 2019

having the same issue

Koushikphy on 14 Mar 2019

Hey @Kacppian are you still planning to tackle this? If not, I'd love to make a quick PR for it sometime this week.

ryandrew14 on 25 Mar 2019

Refer to https://github.com/zkat/npx/pull/181#issuecomment-479293783 for those who need a "right now" fix.

illeatmyhat on 3 Apr 2019

Hey @ryandrew14, please do so.

Kacppian on 3 Apr 2019

👍3

Has this still not been fixed ?

ArthurAttout on 25 Apr 2019

Today I encountered a similar issue with npx create-react-app my-app(mkdir failed).

Reason for my error

I had space in my user name folder(ex: Abc Xyz) and thus "npx" couldn't refer to it correctly (It only read Abc, and not Xyz).
I am using VS Code for React, and it didn't had the permission to create new directory

How I fixed it

Opened VS Code with Administrator rights.(fixed permission issue)
Instead of using "npx" I tried the following:

--> npm install -g create-react-app

--> create-react-app my-app

And that got executed successfully.

Hope this helps.

malhar234 on 1 Jun 2019

👍191 ❤50 🎉36 🚀30 😄28 👀10

Thanks, @malhar234! Worked perfectly.

galenmontague on 8 Jun 2019

Thanks Malhar it worked for me too. Its been very frustrating

L53c on 18 Jun 2019

Thank you @malhar234

ToniMaunde on 15 Jul 2019

Unfortunately, npx still seems to have issues for windows users (Windows account user manager enforces First Name, Last name paradigm which makes it a real problem). Switching to trusted npm install.

mayankarya2020 on 17 Jul 2019

U are a true legend m8 :)

yifan0707 on 18 Jul 2019

👍9 😄1

You are awesome <3

munsa on 29 Jul 2019

👍2

Lifesaver!

kinghuthman on 29 Jul 2019

👍4

Using Git Bash for Windows 10 also works. Probably more comfortable than opening heavy VS Code.

VISHAL-RAJ-ROY on 4 Aug 2019

👍1

Hi, I had no problems installing npm packages globally using command prompt until I tried create-react-app 'foldername' and it just errored out every time. I tried for a whole day searching for answers.
Then, just now I had a brainwave and tried it in Windows PowerShell. It worked immediately. Happy Hacking. Maybe it's just a coincidence but I hope it's helpful to someone out there.

LGRunning on 12 Aug 2019

the final solution to this issue is , yarn is malfunctioning and When you create a new app, the CLI will use Yarn to install dependencies and yarn fails because it's mulfunctioning .So create a react app using only npm by following command npx create-react-app my-app --use-npm
Otherwise you have to install yarn@latest by visting https://yarnpkg.com/en/docs/install#windows-stable, if you are using windows then download a .msi file and run it.
For mac -> brew install yarn

Hope above will work for you.

sudipzoom on 16 Aug 2019

👍13 ❤3 👎1

Thank you for your help

On Fri, 16 Aug 2019, 19:33 sudipzoom, notifications@github.com wrote:

LGRunning on 16 Aug 2019

I solved changing NPM prefix to C:\.npm and cache to C:\.npm\cache

This also worked https://github.com/facebook/create-react-app/issues/6512#issuecomment-522108311

nathan130200 on 9 Sep 2019

Bhagwan aapko lambi umar de :)

amresh1495 on 11 Sep 2019

😄5 👍3

Thank you..This works perfectly.

GouthamiSangana on 14 Sep 2019

What @malhar234 suggested worked! I had the same problem with a Next.js app. Running create-next-app worked:

create-next-app --example with-zones with-zones-app

instead of:

yarn create next-app --example with-zones with-zones-app

giovannipds on 5 Oct 2019

thanks so much.. it worked for me.. am using windows 10

N-Akoma on 18 Oct 2019

In case if any one facing this issue while creating react native project.

You can change the location of npm-cache globally to overcome this issue as a workaround.

By running the below command(Make sure the new location does not contain any white spaces)

npm config set cache D:\npm\npm-cache --global

JohnPremKumar on 31 Oct 2019

😄2 👍2

Today I encountered a similar issue with _npx create-react-app my-app_(mkdir failed).

Reason for my error

1. I had space in my user name folder(ex: Abc Xyz) and thus _"npx"_ couldn't refer to it correctly (It only read Abc, and not Xyz).

2. I am using VS Code for React, and it didn't had the permission to create new directory

How I fixed it

1. Opened VS Code with Administrator rights.(fixed permission issue)

2. Instead of using _"npx"_ I tried the following:
   --> _npm install -g create-react-app_
   --> _create-react-app my-app_

And that got executed successfully.

Hope this helps.

Based God my dude, thanks!

Valseer on 31 Oct 2019

Referenced by https://github.com/zkat/npx/issues/146#issuecomment-384019497
.
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

alperenarc on 8 Dec 2019

👍1

I just solved this problem by referring to a note from one of the React communities (written by Syamlal CM)

https://www.techomoro.com/how-to-install-and-setup-a-react-app-on-windows-10/?unapproved=4144&moderation-hash=2a4991cce9f1b2c682047e222f449b0c#comment-4144

After installing node.js:

First step,
npm install -g create-react-app
Second step
npx create-react-app project-name

It worked for me. I use window 10.

102524337 on 9 Dec 2019

👍4 🎉2 ❤1

I still had this problem on Windows 10, but I finally found a solution that worked for me.

From here:
https://superuser.com/questions/348079/how-can-i-find-the-short-path-of-a-windows-directory-file
cmd /c for %A in ("C:\Users\Name Surname") do @echo %~sA
I added a new short name to my path.
From @alperenarc answer, I change the global npm cache path to the new short named one.
npm config set cache "C:\Users\NAME~1\AppData\Roaming\npm-cache" --global

After that, when I run npx create-react-app my-app npm uses the short path NAME~1 without the space and everything worked fine.

SandroMaglione on 11 Dec 2019

👍5 🎉1

It's Important...
I would like to underline that you should never forget to run the command window in ADMIN MODE.

alperenarc on 11 Dec 2019

I had the same problem and this worked for me

Open cmd and go to C:\Users and then type dir /x to get the user name you want to user
npm config edit and manually replace the user name where it says cache=C:\Users\your name\AppData\Roaming\npm-cache

Both npx and npm works fine afterwards

Akbarali812 on 13 Dec 2019

👍6 ❤1 🎉1

It works even for npx degit

TAUFEEQ1 on 14 Dec 2019

Thanks @malhar234 :)

SatishRishabh on 16 Feb 2020

Folks and @malhar234 ,

I had the same problem

I solved this problem when I 'Set-ExecutionPolicy' using Power Shell.

If your ExecutionPolicy is Restricted you cannot run this. (PowerShell security policy to prevent malicious scripts from being improperly executed on your system).

You can discover out you ExecutionPolicy usinng Get-ExecutionPolicy on Power Shell.

After 'Set-ExecutionPolicy Unrestricted' on Power Shell I could run

'_npx create-react-app myprojetc_' using 'Visual Studio Code''s Terminal (for example) and it worked normally

federfelipe on 29 Mar 2020

I tried all this workarounds but the only which work for me is this fix
https://github.com/zkat/npx/issues/146#issuecomment-384016791

Just by run the on terminal: npm config set cache C:\tmp\nodejs\npm-cache --global
this will move the npm-cache folder to another directory "C:\tmp..." and npx will start to work

luisnoresv on 7 Apr 2020

👍5

Solution 1:
First run npm install -g create-react-app
then you can use npx create-react-app myappname

Solution 2:
if you want it to do in modern way as mentioned in create-react-app link. It offers a modern build setup with no configuration such as mentioned in solution 1.

If you've previously installed create-react-app globally via npm install -g create-react-app. Uninstall the package usingnpm uninstall -g create-react-app to ensure that npx always uses the latest version.

obviously the error occur because of the space between username

/c/Users/Fareed Khan <-- removing space between Fareed and Khan

adding ~1 just exactly after 6 letters

I will use Fareed~1

If the name is greater than 6 letters for example: /c/Users/ABCDEFGF FILES.
You will useABCDEF~1

Run this command, for me it looks like this
npm config set cache "C:\Users\Fareed~1\AppData\Roaming\npm-cache" --global

Then you can run npx create-react-app myappname. It will work!

FareedKhan-dev on 7 May 2020

👍4 ❤3 🚀1

this is the error it's showing.
can you help me out w this?

sidrakshe28 on 11 May 2020

@sidrakshe28, You have to first install create-react-app using npm install -g create-react-app globally then you can use this command to create a new project npx create-react-app robofriends.

and by seeing the name of robofriends, if i am not wrong then you are doing this project from andrei Neagoie course related to Web Development. I had the same issue and it gets solved from my previous answer!

FareedKhan-dev on 11 May 2020

issue solved successfully.thank you.

sidrakshe28 on 11 May 2020

Just run cmd in administrative mode and it will work perfectly..

rahul-kewat on 13 May 2020

ishvarapranidhana on 15 May 2020

Hey @iansu is this issue still open?

I can do a quick fix as described here if not!

wambu-i on 18 May 2020

malhar you da MAN! :) thanks a lot for this ! :D

ZenSurfer on 16 Jul 2020

Thank you @malhar234

LearnChemE on 11 Aug 2020

This problem was reported a year and a half ago in Feb 2019 and still in Aug 2020 there is no fix to npx! I just upgraded to the latest LTS version of Node.js which is 12.18.3 which came with npm 6.14.6 and npx 6.14.6 and still the problem persists.

This is unfortunate since the workaround to just stick with a global install of create-react-app is the old approach circa 2017. In 2020, we should be able to benefit from the npx command which does not require a separate install of create-react-app. Installing create-create-app globally causes it to get stuck on a version that is not up to date.

KenACollins on 29 Aug 2020

👍3

Yup still running into the same issue.

paulschuetz on 30 Aug 2020

You sir are a legend.

dipankar-datta on 3 Sep 2020

Thanks!

lucas-andre on 9 Sep 2020

Hey Everyone,

Stop quoting malhar234's solution. It is not a solution. It is just the old way of creating a React app before npx was introduced. There is still no npx fix.

KenACollins on 9 Sep 2020

👍1

The above solution recommends installing globally, but there's no need to unless you want to have the command available generally on the path. I prefer not to have tools cluttering the global area if they are not needed. For a local setup simply run:

npm i create-react-app --no-save

Then:

npx create-create-app [any other needed parameters here]

It's strange that there aren't enough Windows developers using NPM where this type of thing hasn't been resolved by now. It's also strange how spaces in the path has been a thorn in the side for all sorts of programs for decades.

kstewart83 on 16 Oct 2020

👍3

@malhar234 Thank you so much!! I tried so many ways to rename my user folder and was just about to create a new user and copy over all my files to fix this issue! Your solution works perfectly!

amygeorge on 24 Oct 2020

A lot of the times it's because your user folder has a space in it. For example, when I open my CMD, I can see:
C:\Users\Dino Cajic>

Open CMD as Administrator (Right Click on CMD and click Run as administrator).

To make sure that this does not cause an error, type in:
C:\Users\Dino Cajic>npm config edit

Every place where it shows your user name with a space,

remove the semi-colon
remove last name and append ~1 to the First Name.

For example, change this
; cache=C:\Users\Dino Cajic\AppData\Roaming\npm-cache

To this
cache=C:\Users\Dino~1\AppData\Roaming\npm-cache

Save and close .npmrc file.
Restart terminal.
Try running: npx create-react-app app-name

dinocajic on 7 Nov 2020

I don't have a solution here, I just can't believe that spaces in pathnames is still a problem in 2020.

ariccio on 9 Nov 2020

👍1

It looks like the tracking for that bug is now here: https://github.com/npm/npx/issues/6

ariccio on 9 Nov 2020

I am getting a new error can someone pls explain

what is cb() and they are telling to report this error to the community.

NamanDeept on 10 Nov 2020

Hey @NamanDeept this must be npm error, so for remove this error, you need to delete npm cache from your PC.

And as per my knowledge AppData folder is hidden in Windows. So you may be can't find "npm_cache" folder manually. Either you need to enable option of "show hidden files" or type this "C:\User\Naman Deept\AppData\Roaming\" file url in windows location bar like this

github issue

And find folder with name "npm_cache" and delete it.

Then run create-react-app again. It will work perfectly

Utsav-Ladani on 11 Nov 2020

Thanks that worked thank you for helping :-)

NamanDeept on 14 Nov 2020

Olá pessoal, estou com problema na instalação do react js. Ele para na parte descrita acima e não termina a instalação. Já tentei várias vezes de diversas formas e não consigo finalizar a instalação. Alguém consegue me ajudar?
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 29 new dependencies.
info Direct dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 127.97s.