Need help with React install

sabbyiqbal · February 28, 2020, 2:19am

I wanted to start a new React project so I went about my usual route:
npx create-react-app app-name-here

But I’ve been getting a bunch of errors. After reading several StackOverflow posts (and uninstalling and re-installing Node), I am now repeatedly getting this error:

I think this is the solution >>> https://stackoverflow.com/a/58313464/9313843 but I cannot follow it and the npm documentation was not much help either.
I know I have to find 4 files and edit…something…? But that’s all I can tell.

I’ve been trying to fix this for several hours and I think I just need help now. Can anyone break down the steps?

Error in text format in case that’s useful:

C:\Users\sabahat iqbal>npx create-react-app urdu-flash
Error: EEXIST: file already exists, mkdir 'C:\Users\sabahat'
TypeError: Cannot read property 'loaded' of undefined
    at exit (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:97:27)
    at errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:216:3)
    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:225:22)
    at C:\Program Files\nodejs\node_modules\npm\lib\npm.js:263:24
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:81:7
    at Array.forEach (<anonymous>)
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:80: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:171:20)
C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:97
  var doExit = npm.config.loaded ? npm.config.get('_exit') : true
                          ^

TypeError: Cannot read property 'loaded' of undefined
    at exit (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:97:27)
    at process.errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:216:3)
    at process.emit (events.js:311:20)
    at process._fatalException (internal/process/execution.js:164:25)
Install for [ 'create-react-app@latest' ] failed with code 7

husseyexplores · February 28, 2020, 2:50am

C:\Users\sabahat iqbal>npx create-react-app urdu-flash
Error: EEXIST: file already exists, mkdir 'C:\Users\sabahat'

It looks like you’re using windows cmd prompt and it is tipping over whitespace.
You’re running this script in a folder named sabahat iqbal, and you’re getting the error that sabahat folder already exists. (It should have said, sabahat iqbal).
I’ve gone through this trouble multiple times and it’s very frustrating. It’s better to use Git Bash terminal instead of the windows cmd prompt.

You may also try and see if you can run this script in your C:\ drive only, so there are no folders with spaces.

And also make sure you’re running the cmd prompt with enough privileges, as running scripts in drive C:\ often fails due to this reason.

sabbyiqbal · February 28, 2020, 3:18am

I tried running the script in c:\Users since there are no spaces there and I got the same error.

I then tried running this in Git Bash but I got the same error there too.:

So then I went to one of my other project folders and tried to install bootstrap - just to see what happens. Now I’m worried that there is fundametally wrong with npm on my computer and I have no idea what:

husseyexplores · February 28, 2020, 3:51am

Did you try opening the git bash with admin privileges? (Runs as administrator?)

Edit:
Also, try these solutions as well and see if it works:

sabbyiqbal · February 28, 2020, 4:14pm

I’ve never used Git Bash before so I’ll try the other solutions before I come back to that again.

Update:

I don’t have malwarebyte installed on my laptop.
As far as I can tell no node.js tasks are running.
I have tried running npm without VS running.
Which package-lock.json file do I get rid of…? I have tons of them from old projects…and I thought we needed them? In order to be able to deploy project with all dependencies intact…? If I don’t commit them to Git, won’t that mess up the project.

Gonna keep looking.

One more edit:
Running npx cmd in Git Bash as adminitrator didn’t work either.

husseyexplores · February 29, 2020, 8:55am

That’s unfortunate! I can’t help much since I can’t test/replicate this.

First, try running npm cache clean -f command. This will clear the npm cache.

If it doesn’t work, you can try reinstalling Node.JS (latest stable version). Remove any cached packages/folders.
(Remove C:\Users\sabahat iqbal\AppData\Roaming\npm-cache folder before reinstalling nodejs)

If it still doesn’t work, try using yarn for the time being perhaps.

And whenever you figure out the solution, please post it here as it can help others as well.

Good luck! I’ll update here if I could think of any other possible solution.

sabbyiqbal · February 28, 2020, 6:14pm

Thanks for trying! I am going to a tech meetup in a couple of days; maybe someone there will be an npm expert…??

lasjorg · February 28, 2020, 7:05pm

Not sure why normal npm installs would fail, but it sounds like npx has an issue with Windows user names with spaces (your profile name).

There are some possible solutions in this github issue

One apparently is to install create-react-app globally but still use npx for the install.

npm install -g create-react-app

npx create-react-app project-name

sabbyiqbal · February 29, 2020, 7:23pm

OK…this is where I am at:

Success! Was able to run create-react-app successfully. So happy.
This is where things get weird (but also maybe sheds some light on why I was having problems to begin with):

I followed the instructions that worked for this person: https://github.com/facebook/create-react-app/issues/6512#issuecomment-548571293
So these were the steps:

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_

Aaaaand this is the result I got:

c:\Users\sabahat iqbal\Dropbox\PROJECT_Urdu>create-react-app urdu-flash

Creating a new React app in c:\Users\sabahat iqbal\Dropbox\PROJECT_Urdu\urdu-flash.

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

yarn add v1.22.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.2: The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > eslint-config-react-app@5.2.0" has incorrect peer dependency "eslint-plugin-flowtype@3.x".       
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 
|| >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 9 new dependencies.
info Direct dependencies
├─ cra-template@1.0.2
├─ react-dom@16.13.0
├─ react-scripts@3.4.0
└─ react@16.13.0
info All dependencies
├─ cra-template@1.0.2
├─ is-docker@2.0.0
├─ open@7.0.2
├─ react-dev-utils@10.2.0
├─ react-dom@16.13.0
├─ react-error-overlay@6.0.6
├─ react-scripts@3.4.0
├─ react@16.13.0
└─ scheduler@0.19.0
Done in 89.95s.

Installing template dependencies using yarnpkg...
yarn add v1.22.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.2: The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > eslint-config-react-app@5.2.0" has incorrect peer dependency "eslint-plugin-flowtype@3.x".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 
|| >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 18 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@4.2.4
├─ @testing-library/react@9.4.1
├─ @testing-library/user-event@7.2.1
├─ react-dom@16.13.0
└─ react@16.13.0
info All dependencies
├─ @sheerun/mutationobserver-shim@0.3.2
├─ @testing-library/dom@6.12.2
├─ @testing-library/jest-dom@4.2.4
├─ @testing-library/react@9.4.1
├─ @testing-library/user-event@7.2.1
├─ @types/prop-types@15.7.3
├─ @types/react-dom@16.9.5
├─ @types/react@16.9.23
├─ @types/testing-library__dom@6.12.1
├─ @types/testing-library__react@9.1.2
├─ css.escape@1.5.1
├─ csstype@2.6.9
├─ min-indent@1.0.0
├─ react-dom@16.13.0
├─ react@16.13.0
├─ redent@3.0.0
├─ strip-indent@3.0.0
└─ wait-for-expect@3.0.2
Done in 26.03s.
Removing template package using yarnpkg...

yarn remove v1.22.0
[1/2] Removing module cra-template...
[2/2] Regenerating lockfile and installing missing dependencies...
info fsevents@2.1.2: The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
warning "react-scripts > eslint-config-react-app@5.2.0" has incorrect peer dependency "eslint-plugin-flowtype@3.x".       
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 
|| >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
success Uninstalled packages.
Done in 20.63s.

Success! Created urdu-flash at c:\Users\sabahat iqbal\Dropbox\PROJECT_Urdu\urdu-flash
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd urdu-flash
  yarn start

Happy hacking!

So…did I install using yarn…? I thought that required a yarn key word in the cmd line…? (I had installed yarn a week or so ago as part of instructions for contributing to an open-source project…is it possible that was part of the problem…?). But I don’t know where this leaves me…? I think I have essentially loaded create-react-app with yarn and now I should just continue using it when starting and building my react app. Can anyone think of any pitfalls…?

Thanks! I hope this is the end of my create-react-app drama.

chuckadams · February 29, 2020, 8:25pm

create-react-app will use yarn in preference to npm if you have it installed. Other than creating a different lockfile, there isn’t a whole lot of difference between the two (yarn used to be much faster, but npm has largely caught up)

lasjorg · March 2, 2020, 5:24pm

I know this reply is a little late.

First off, I get the temptation to just leave everything as is (if it works, don’t fix it) so feel free to just ignore this. I just wanted to post this in case you run into issues again or for anyone reading this with the same problem.

The best solution would be to fix the real issue, which as far as I can tell, is fixing the path to the npm-cache. Otherwise, you might just run into this again. Also, using a global install of create-react-app is not advised as you may not get the latest version.

You can either edit the npm-cache path to use the short folder name or move the cache location. The simplest of the two is to move it, the “safer” might be to use the short folder name (not that moving the cache should be unsafe really).

Move the cache:

"npm config set cache C:\tmp\nodejs\npm-cache --global"

Set the path using short folder name (for your user name):

npm config set cache "C:\Users\SABAHA~1\AppData\Roaming\npm-cache" --global

More info:

Moving the cache
Using short folder name
More info on short folder name

After you change the path, uninstall the global create-react-app npm uninstall -g create-react-app, and try using npx again.

sabbyiqbal · March 2, 2020, 5:30pm

Thanks @lasjorg - wholeheartedly agree with fixing all loose ends.

Quick note/question - my solution really ended up being (inadvertently) installing with yarn and not npm at all. That’s not to say that I should not fix my npm issue but, if I understand this correctly, the advisement should not apply to me in this case, correct?

lasjorg · March 2, 2020, 5:43pm

I think Yarn will use the global install as well (don’t really know Yarn all that well). What you really want is to be able to use npx for the create-react-app installs.

Edit: Oh and create-react-app will still use Yarn for the actual install process if Yarn is installed on the system.

sabbyiqbal · March 8, 2020, 1:13am

More success!

I ran this command: npm config set cache C:\tmp\nodejs\npm-cache --global successfully. (Thanks @lasjorg! )

So then I went ahead and tried to run: npx create-react-app my-app.

Something ran but at the end, the messages I got were all for yarn react app and when I opened the project folder, there was a yarn.lock file.

So I also had to uninstall yarn else computer was using that to create-react-app even though I specified npx…??

After uninstalling yarn, I re-ran the npx cmd and this time I got an npm react app.

Yay!

The End. (Hopefully).

lasjorg · March 8, 2020, 1:24am

Good to hear.

It isn’t an issue that create-react-app is using yarn, that is just what it defaults to. It does that for me as well because I have yarn installed.

I’m not 100% sure about how npx works but I believe it is just used in the beginning to fetch the packages and store them locally in a temp folder. Then either yarn or npm is used for the actual install process (I think, anyway).

abdul121 · June 1, 2020, 11:55am

hey @sabbyiqbal

i am getting this error when i run npx create-react-app my-app

when i run npm audit fix i got this msg: 1 vulnerability requires manual review. See the full report for details.

In audit details its showing Low prototype pollution .
plzz help!!

chuckadams · June 13, 2020, 11:52pm

The security alerts are not errors, and your app will work just fine if you ignore that message. Not all security bugs are applicable to all environments.

My project which has dependencies less than 2 years old has 615 vulnerabilities. The JS ecosystem is a garbage fire.

sabbyiqbal · June 13, 2020, 11:51pm

Hi @abdul121 - Sorry I did not respond sooner! Hopefully you got the answer you needed from @chuckadams .

Sheenam · August 3, 2020, 6:41pm

I have done the same process but it does not work.It does not install public and src folder.Please help!!!

sabbyiqbal · August 3, 2020, 10:07pm

hi @Sheenam, I might not be the best person to help as NPM is my nemesis. But I can try.

What steps did you take before getting to the screen shot you pasted above?