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

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.

[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.

[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 "create-react-app@2.1.5" 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.