Npm / react-scripts version issue

I am currently working through John Smilga’s “Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks” on freeCodeCamp’s YouTube channel: Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks - YouTube

I am having issues with “Install Starter” (3:33:03) . When I type in npm install && npm start I get the following error:

npm WARN tsutils@3.17.1 requires a peer of 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 but none is installed. You must install peer dependencies yourself.

audited 1638 packages in 7.735s

67 packages are looking for funding
  run `npm fund` for details

found 84 vulnerabilities (82 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details

> tutorial@0.1.0 start /Users/owner/react-advanced-2020
> react-scripts start


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "^6.6.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

  /Users/owner/node_modules/eslint (version: 7.25.0) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/owner/node_modules/eslint is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls eslint in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! tutorial@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the tutorial@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/owner/.npm/_logs/2021-05-10T18_57_38_644Z-debug.log

I have tried the suggest steps with no success, as well as some suggestions from stackoverflow. I also downloaded GitHub Desktop thinking it might help. Any suggestions are appreciated!

Hello there,

Something similar happened here:Integration React to Ruby Blog

I still do not understand what the actual fix was, but I would suggest the same to you:

  • Ensure you do not have eslint installed globally, then try again.

Perhaps, even try a clean slate with npm, if you are willing to do this:

Hope this helps, otherwise, others might know better.

hi, thank for the reply, i followed the second link and typed the command into my terminal from the root, but without success. Any other suggestions are welcome.

Do you have a repo for this so we can try ourselves? Or at least repro steps?

Based on what I think you’re saying, I went to GitHub - john-smilga/react-advanced-2020, cloned his site, installed, and started - it starts fine for me.

Hi Kevin, I appreciate you looking into my issue, I thought it was an error on my side, thanks for confirming this.
Do you have any suggestions regarding how I might go about narrowing down my exact issue, or where I can find help? I have not created a github repo for this project yet as I haven’t been able to install / start npm.

Did you check your global packages (npm ls)

npm ls -g --depth 0

If you see eslint or create-react-app uninstall them

npm uninstall -g create-react-app (same for eslint).


If you uninstalled the globals and it doesn’t help.

Does it also happen if you create a fresh create-react-app as well (npx create-react-app appname). Or is it just for this starter project? If it’s just for the starter project, one option you can try is to update the react-script in the package.json to the latest version. Although, as someone already tested the starter project as is with no issues this really shouldn’t be needed.

1 Like

hey lasjorges thanks for looking into my problem, I tried uninstalling the globals of eslint and create-react-app, the issue is limited to the starter project for this video.

I might also suggest that you closely reread through and retry the suggestions in the original output you posted - they seem like good suggestions. I know that sometimes I miss something the first time through.

I’m especially surprised that this doesn’t work:

f you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

That’s maybe not an ideal solution, but I’d expect it to do something.

hey Kevin! thanks for pointing that out, I hadn’t considered that skip-preflight-check=true was a solution and likewise haven’t tried it. I am new to react (and programming in general), and am unsure of what a .env file is, or where I should be looking for it. I will do some research on it right now and let you know how it goes!

I guess I’m a little confused because you said that you’d “tried the suggested steps”. That is not numbered, but it is in the message.

It’s good to get in the habit of reading things like this VERY closely. I’ve had many problems solved by paying very close attention to messages like this or documentation. Computers aren’t really good at “close enough”.

Again, I would reread that message very closely and try everything it suggests.

I apologize for the confusion, i have repeated steps 1-7 several times, currently i am working on setting skip-preflight-check equal to true.

If it doesn’t work. I would still suggest also trying to update the react-scripts. You can just add the new version to the package.json file before running npm install ("react-scripts": "4.0.3"). I tested it with the updated script and the project still works (well I just started it and did one change, but that did work just fine).

1 Like

lasjorg, i just updated the “react-scripts” in the package.json file, and now everything seems to be working! thank you for pointing out exactly where to update “react-scripts”, as i think i was trying to update it in package-lock.json yesterday. thank you guys so much for your time & patience!!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.