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.

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.

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?

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

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

I'd love to!

Great! It's all yours.

having the same issue

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

Refer to zkat/npx#181 (comment) for those who need a "right now" fix.

Hey @ryandrew14, please do so.

Has this still not been fixed ?

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, @malhar234! Worked perfectly.

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

Thank you @malhar234

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.

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 :)

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

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!

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

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

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

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!

Referenced by zkat/npx#146 (comment)
.
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

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.

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

1. 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.
2. 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.

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

I had the same problem and this worked for me

1. Open cmd and go to C:\Users and then type dir /x to get the user name you want to user
2. 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

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.

It works even for npx degit

Thanks @malhar234 :)

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

I tried all this workarounds but the only which work for me is this fix
zkat/npx#146 (comment)

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

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 using npm 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 use ABCDEF~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!

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.
the second command is not working for me.
PS E:\react> create-react-app robofriends
create-react-app : The term 'create-react-app' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the
name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1

• create-react-app robofriends

•   + CategoryInfo          : ObjectNotFound: (create-react-app:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException
  
  

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

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

issue solved successfully.thank you.

tl;dr - zkat/npx#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:
zkat/npx#100 (comment)

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 zkat/npx#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.

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

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
using your approach npx worked! thanks!

Hey @iansu is this issue still open?

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

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.

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.

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

Thank you @malhar234

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.

Yup still running into the same issue.

I tried all this workarounds but the only which work for me is this fix
zkat/npx#146 (comment)

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

You sir are a legend.

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!

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.

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.

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