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

[keir]

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:

1. Be on Windows 10, with a username that has spaces (like "Jane Doe") instead of without spaces (like "janedoe").
2. Remove any old node installs or caches. In my case, this machine has never had node.
3. Install Node 10.15.1 LTS from the main Node site .
4. They try running npx create-react-app my-app; it fails with the mentioned EPERM error (below).
5. They try running npm init react-app my-app, alternate command mentioned on the Create React App README; same error (below).
6. 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.

[iansu]

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.

[pnhoffmann]

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.

[iansu]

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?

[Kacppian]

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

[iansu]

@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?

[Kacppian]

I'd love to!

[iansu]

Great! It's all yours.

[Koushikphy]

having the same issue

[ryandrew14]

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

[illeatmyhat]

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

[Kacppian]

Hey @ryandrew14, please do so.

[ArthurAttout]

Has this still not been fixed ?

[malhar234]

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.

[galenmontague]

Thanks, @malhar234! Worked perfectly.

[L53c]

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

[ToniMaunde]

Thank you @malhar234

[mayankarya2020]

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.

[yifan0707]

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.

U are a true legend m8 :)

[munsa]

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.

You are awesome <3

[kinghuthman]

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.

Lifesaver!

[VISHAL-RAJ-ROY]

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

[LGRunning]

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.

[sudipzoom]

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.

[LGRunning]

Thank you for your help

On Fri, 16 Aug 2019, 19:33 sudipzoom, [email protected] wrote:

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 it fails.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 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 works for you.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/6512?email_source=notifications&email_token=AMGDOACADTMXJHJIJ2BU763QE3XHRA5CNFSM4GZ3K5CKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4PL3FY#issuecomment-522108311, or mute the thread https://github.com/notifications/unsubscribe-auth/AMGDOABE2L6CTYSUNVEQCK3QE3XHRANCNFSM4GZ3K5CA .

[nathan130200]

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

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.

[amresh1495]

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.

Bhagwan aapko lambi umar de :)

[GouthamiSangana]

Thank you..This works perfectly.

[giovannipds]

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

[N-Akoma]

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.

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

[JohnPremKumar]

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