Trying to do a React tutorial and getting ERESOLVE "unable to resolve dependency tree"

Question

I'm trying to learn React and npm. I'm starting the tutorial here: https://react.dev/learn/tutorial-tic-tac-toe . It also gives the setup to follow if setting up on your own laptop.

package.json :

{
  "name": "react.dev",
  "version": "0.0.0",
  "main": "/src/index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "react": "19.0.0-rc-3edc000d-20240926",
    "react-dom": "19.0.0-rc-3edc000d-20240926",
    "react-scripts": "^5.0.0"
  },
  "devDependencies": {}
}

However, I get the error below.

What is the meaning of this error/why does it happen?
How do I resolve it (without causing some other problem).

`

C:\code\react-ttt>npm --version
10.9.0


C:\code\react-ttt>npm install   
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   react@"19.0.0-rc-3edc000d-20240926" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@">= 16" from [email protected]
npm error node_modules/react-scripts
npm error   react-scripts@"^5.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\myname\AppData\Local\npm-cache\_logs\2025-01-06T06_23_44_167Z-eresolve-report.txt
npm notice
npm notice New major version of npm available! 10.9.0 -> 11.0.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.0.0
npm notice To update run: npm install -g [email protected]
npm notice
npm error A complete log of this run can be found in: C:\Users\ddavis\AppData\Local\npm-cache\_logs\2025-01-06T06_23_44_167Z-debug-0.log

Edit: Changed react version to ^19.0 and it worked with warnings. Will try to switch to Next.js.

Answered in Why am I getting 6 high severity vulnerabilities on using create-react-app? — Phil
– Phil, Commented Jan 6 at 23:53
I said it was answered there, not the same question. Do you not see the note in one of the answers that react-scripts / CRA does not support React v19? — Phil
– Phil, Commented Jan 7 at 2:14
@Phil Ok, I see. Someone marked this as a duplicate question, I was trying to figure out why. But thanks. — developer981
– developer981, Commented Jan 7 at 2:26
Marking as a duplicate means the same thing. When questions are closed as such, the banner even says "This question already has answers here..." — Phil
– Phil, Commented Jan 7 at 3:18

Phil · Accepted Answer · 2025-01-06 23:54:58Z

2

What is the meaning of this error/why does it happen?

there's a dependency issue between react and react-scripts. the react version you're using is 19.0.0-rc, a release candidate (which might introduce breaking changes). though, react-scripts is asking for a version react version 16 or higher. the current version you're using being a release candidate may be the reason the issue occurs.

How do I resolve it (without causing some other problem).

Downgrade react
Or solve the bigger issue which is react-scripts is low key deprecated. React recommends you start react through a framework -- i.e. vite/ nextjs/ etc:

You can definitely use React without a framework—that’s how you’d use React for a part of your page. However, if you’re building a new app or a site fully with React, we recommend using a framework.

edited Jan 6 at 23:54

Phil

166k25 gold badges265 silver badges269 bronze badges

answered Jan 6 at 8:25

user19259811

Sign up to request clarification or add additional context in comments.

1 Comment

developer981 Jan 6 at 9:14

Thanks for the reference. I still don't understand what all of the pieces do, but I'll try to use Next.js. I have heard of that one. Changing requirement to react ^19.0 worked temporarily though.

Sai Teja Yelubolu · Accepted Answer · 2025-01-21 13:05:26Z

1

If you are using ReactJS:

stack overflow: https://stackoverflow.com/a/79296249/12760567

or

GitHub: https://github.com/facebook/react/issues/31699#issuecomment-2553006023

or

YouTube: https://youtu.be/mUlfo5ptm1o?si=oBGmCjLirchI5s2f

If you are using React with Typescript:

GitHub: https://github.com/facebook/react/issues/31699#issuecomment-2604560106

or

YouTube: https://youtu.be/_0_kW0xI7P8?si=JWDu0Lyskflmdjol

answered Jan 21 at 13:05

Sai Teja Yelubolu

795 bronze badges

Comments

Fariborz Beyraghdar · Accepted Answer · 2025-01-06 08:27:41Z

-3

1- Your application needs to use some libraries like react, these libraries should be present in the root of your project path in the node_modules folder. After creating your project, you need to run "npm install" on the command line to install all the libraries listed in your project's package.json. After that, if you need to add a new library, you need to install it individually.

2- You need to install node_modules by running "npm install" on the command line (in your project path).

answered Jan 6 at 8:27

Fariborz Beyraghdar

11 bronze badge

1 Comment

khn Rzk Jan 6 at 9:18

In accurate answer, Better give a direct one

Collectives™ on Stack Overflow

Trying to do a React tutorial and getting ERESOLVE "unable to resolve dependency tree"

3 Answers 3

1 Comment

If you are using ReactJS:

If you are using React with Typescript:

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

If you are using ReactJS:

If you are using React with Typescript:

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related