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

[keir]

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.

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

[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 zkat/npx#181 (comment) for those who need a "right now" fix.

[Kacppian]

Hey @ryandrew14, please do so.

[ArthurAttout]

Has this still not been fixed ?

[ghost]

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!

[SeanPaulson]

@ssmkhrj Thank you!

[thevectorengineer]

Please fix this

Creating a new React app in C:\Users\veer singh\Desktop\MERN\Assignment2\myapp.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR! https://npm.community

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\veer singh\AppData\Roaming\npm-cache_logs\2020-12-16T16_18_41_297Z-debug.log

Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.

Deleting generated file... node_modules
Deleting generated file... package.json
Deleting myapp/ from C:\Users\veer singh\Desktop\MERN\Assignment2
Done.

[AlexChungA]

⭐This is what worked for me⭐

Change the location for npm-cache by default its C:\Users\Firstname Lastname\AppData\Roaming\npm-cache and the space in the username causes this issue.
So, it can be changed using the following command
npm config set cache C:/npmcache --global

Also, I read some fixes where you first npm i -g create-react-app i.e install it globally and then run npx create-react-app. But this actually makes no sense because after installing it globally npx create-react-app is same as just create-react-app. Also, you are not actually running the latest version of the command but instead the one that is installed globally.

Hope this helps! ✌️

When I used create-react-app, it showed this:
create-react-app : El término 'create-react-app' no se reconoce como nombre de un cmdlet, función, archivo de script o programa ejecutable.
Compruebe si escribió correctamente el nombre o, si incluyó una ruta de acceso, compruebe que dicha ruta es correcta e inténtelo de nuevo.
En línea: 1 Carácter: 1

• create-react-app react-frontend

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

However, with npx create-react-app <app-name>, it finally worked!
Thank you @ssmkhrj !

[KndaNoob]

I'm writing this in January 2021, and this issue still exists. You can either go the npm route or change the cache folders location with this npm config set cache C:/npmcache --global and use npx create-react-app app-name

[ssjlin9999]

Thank you @ssmkhrj @AlexChungA @KndaNoob !
I try to use the command: npm config set cache C:/npmcache --global
Then used create-react-app my-app --scripts-version 1.1.5
Finally, I create React app successfully. (February 9, 2021)

[rohityv]

Hi friends
How to resolve "no start line" error while installing create-react-app
Please help

[boomshakar]

Here's the FiX you've been waiting for!

Good day everyone... I'm happy to let you all know I've found a good fix for the space in your username without loosing your files/data

**###

HOW TO FIX THE SPACE IN YOUR USERNAME

**

The main reason npx create-react-app myfirstapp is not able to create a react app through your CMD is because there's a space in your username... e.g [Jane Doe] instead of [Janedoe]..

### WARNING!!!!
Create a system restore point before you start this process, and this fix has only been tried on Windows.
Stay Safe!

How to Rename User and User Profile Folder in Windows 10/8/7

Important: To apply the steps below you must sign in to Windows, by using an account with Administrative privileges.

Assumption: Let's suppose that the current username and the related profile folder is named "Josh" and you want to change the account name and the profile folder name to "Joshua".

Step 1. Rename the User from User Account Properties
To change the username of a local account in Windows:

1. Press simultaneously the Windows button + R keys to open the run command box.

2. Type netplwiz & Press Enter.
   

3. Highlight the user that you want to rename and select Properties.
   

4. Then change the current User name (e.g. "Josh) with the new one (e.g "Joshua")

5. When done click Apply and OK twice to close all open windows.
   

### Step 2. Change the User Profile Folder Path in Registry.

1. Open Registry Editor: To do that:

• Press simultaneously the Windows image + R keys to open the run command box.
• Type regedit & Press Enter.
  

2. Navigate to the following key at the left pane:

• HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList

3. Click at any “S-1-5-21-xxx…” registry key, until you find which one contains the path for your profile folder at the "ProfileImagePath" REG_DWORD value.
   * e.g. If your Username is “Josh” then see which S-1-5-21-xxx…” registry key, contains the “C:\Users\Josh” value at ProfileImagePath.
   

4. When you find that key, double click at ProfileImagePath and rename the current path (profile folder name) to the new one. *

• e.g. At this example we proceed to change the "C:\Users\Josh" folder name, with the new folder name "C:\Users\Joshua".

5. When done, click OK.
   

6. Close Registry Editor and Restart your computer.

### Step 3. Rename the User Profile Folder.

1. After restart you 'll be sign to a temporary profile (empty profile) with the message "We can't sign in to your account". (Click Close at this message and continue below).
   

2. Open Windows Explorer and explore the contents of the "C:\Users" folder.

3. Right click on the user profile folder (e.g. "Josh" in this example) and choose Rename.

4. Type the new name for the profile folder (e.g. "Joshua" in this example) and press Enter.

5. Click Continue when asked to provide administrator permission to rename the folder. *

* Note: If you receive an "Access denied" error, when you try to rename the user folder, then try to rename the folder in Safe Mode or try the following:

i. Open Command Prompt as Administrator.
ii. Type the following command and press enter: net user administrator /active:yes
iii. Restart the computer and login as Administrator
iv. Rename the user profile folder.
v. Restart again and login to the (renamed) user.
6. If everything is OK, then disable the administrator account by typing this command (in Command Prompt Admin): net user administrator /active:no

6. Restart your computer to login to your profile with all files and settings untouched!

**Step 4. FIX Invalid Registry References.

The next step, is to fix in the Registry, the references to the old profile folder. To do that:**

1. Download the Registry Finder utility in an archive format, according your Windows version (32 or 64Bit) and extract the download file (RegistryFinder.zip).

2. From the extracted folder, double click to run the RegistryFinder application.
   

3. In Registry Finder, click the Edit menu and choose Find.

4. Type the old folder name (e.g. Josh") and click Find.
   

5. When the search is completed, click Edit and choose Replace in Find Results.
   

6. At 'Find what' field type the old name (e.g. Josh") and in the 'Replace with' field type the new name (e.g. Joshua). When done, click Replace
   

7. When the operation is completed, you should receive an error message that says "error encountered". Just ignore the error message and click No to close the window.
   

8. Close the Registry Finder and restart your PC.

Step 5. Rebuild the Search Index.

The final step is to rebuild the search index. To do that:

1. Navigate to Windows Control Panel and open Indexing Options.*

• If you don’t see the Indexing Options, set the View (View by) to Small icons.

2. At Indexing Options click Advanced.

3. At Troubleshooting section, click the Rebuild button.
   

4. Press OK to rebuild the Index.

5. Wait until the index rebuilding is completed and then restart your computer again.

That’s all guys! Did it work for you?
Cuz it worked for me

[chaurasiawadh]

I solved this using the following command.

npm uninstall -g create-react-app

npm cache clean --force

then

npx create-react-app project_name --template all

Thanks for this! Worked for me too.

[maariitsme]

npm cache clean --force
and continue your work it will work

[julian-a-avar-c]

No caps and no spaces. What is this 1960? I supposed I'll have to rename the user, manually edit the registry, and rename a bunch of folders. 😢

[SeanPaulson]

No that's not necessary. People have already posted work arounds above that work.

…

On Wed, May 26, 2021, 12:34 PM jaacko-torus ***@***.***> wrote: No caps and no spaces. What is this 1960? I supposed I'll have to rename the user, manually edit the registry, and rename a bunch of folders. 😢 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#6512 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOR5YQ4YBMOAUMVWQVFPR63TPUPH5ANCNFSM4GZ3K5CA> .

[julian-a-avar-c]

@SeanPaulson Those didn't work. I keep getting the same error.

[SeanPaulson]

You tried installing react app globally?

…

On Wed, May 26, 2021, 2:20 PM jaacko-torus ***@***.***> wrote: @SeanPaulson <https://github.com/SeanPaulson> Those didn't work. I keep getting the same error. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6512 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOR5YQ3VXQ4UBPAQQYS5DV3TPU3WVANCNFSM4GZ3K5CA> .

[julian-a-avar-c]

@SeanPaulson Yes! And cleaning the cache, and also changing the cache location.

[iamdevelopergirl]

@jaacko-torus, If you are still seeing that problem (without username change), can you please paste the error you are getting?

[julian-a-avar-c]

@iamdevelopergirl Sadly, I gave up and reinstalled Windows because I didn't want to deal with the registry in order to change my username. Thank you for your concern.

[SeanPaulson]

You shouldn't need to deal with the reg. There are a few fixes listed in here that will work.

…

On Mon, Aug 23, 2021, 12:26 PM jaacko-torus ***@***.***> wrote: @iamdevelopergirl <https://github.com/iamdevelopergirl> Sadly, I gave up and reinstalled Windows because I didn't want to deal with the registry in order to change my username. Thank you for your concern. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6512 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOR5YQZMXF6CWYOCKT3ZTWDT6KHGPANCNFSM4GZ3K5CA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[LishuGupta652]

npx create-react-app second
npx: installed 67 in 4.843s

Creating a new React app in /workspaces/crud-api-creation-timeline/nextjs/second.

error An unexpected error occurred: "/workspaces/crud-api-creation-timeline/package.json: Unexpected token < in JSON at position 264".
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.22.10
error An unexpected error occurred: "/workspaces/crud-api-creation-timeline/package.json: Unexpected token < in JSON at position 264".
info If you think this is a bug, please open a bug report with the information provided in "/workspaces/crud-api-creation-timeline/nextjs/second/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Aborting installation.
yarnpkg add --exact react react-dom react-scripts cra-template --cwd /workspaces/crud-api-creation-timeline/nextjs/second has failed.

Deleting generated file... package.json
Deleting generated file... yarn.lock
Done.

[filipescaglia]

Here's the FiX you've been waiting for!

Good day everyone... I'm happy to let you all know I've found a good fix for the space in your username without loosing your files/data

**###

HOW TO FIX THE SPACE IN YOUR USERNAME

**

The main reason npx create-react-app myfirstapp is not able to create a react app through your CMD is because there's a space in your username... e.g [Jane Doe] instead of [Janedoe]..

...

I was having problems running the command:
yarn create react-app
After a long time of searching, I found that the problem really was the space in the username, thanks for the solution!

[boomshakar]

Yo welcome @filipescaglia

[ariccio]

The npx repo has been archived :D so I don't know the status of the bug anymore... does anybody know the status of the problem? It's amazing that it's 2022 and software still can't handle paths with spaces in them!

[TheAli711]

Hey, to resolve this issue I have created PR #12780, this will show a helpful message to Windows users if the project path contains space.
Hopefully, this will close this issue.

[gozenc]

This is not an issue anymore, PR can be closed. I tested with "Kier Mierle" user on Windows 10 with a space in user name as you can see in the GIF. npm needs to be updated.

[harshit240205]

Yes, it is working without any issue.