Thursday, 17 June 2021

React - Error with create-react-app in Windows Environments - "Error: EEXIST: file already exists, mkdir 'C:\Users\XXXXX" - Fix/Solution

I've been asked this a more than once - so thought it prudent to document the current recommended workaround for this issue. While it is possible to install react apps globally to work around the error, it is not recommended per https://create-react-app.dev/docs/getting-started/ 

"If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version."

Preconditions:

  • The windows user name has spaces in it (e.g. c:\User\David Klein)

Steps to reproduce error/issue:

  1. User attempts to create react app with npx in a Windows environment:
    npx create-react-app my-app
  2. Error is generated:
Diagnostics:
  1. Seems that the npm cache path will consequently have a space in the path and npm (or more likely create-react-app) can't handle this.

Solution (until bug is fixed):
  1. Get the current cache path with "npm config get cache"
  2. cd to the c:\Users\ directory and run dir /x to get the short name of that folder (e.g. DAVIDK~1
  3. Once you have the short path, set the npm cache to use that path with the following:
    npm config set cache c:\users\davidk~1\AppData\Roaming\npm-cache --global
You should now be free to continue with your react app goodness in Windows: