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

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.

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.

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.

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.

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

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

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

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

1. When done, click OK.

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

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

1. At Indexing Options click Advanced.

2. At Troubleshooting section, click the Rebuild button.

3. Press OK to rebuild the Index.

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

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.

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.

Bhagwan aapko lambi umar de 😃

⭐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 that doesn’t fix this.

Hope this helps! ✌️

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

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

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.

The npx repo has been archived 😄 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!

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.

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

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!

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 ❤️

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

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.

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

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

Hey @ryandrew14, please do so.

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.

I’d love to!

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.

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.

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

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