create-next-app cannot resolve dependency tree

[hashiromer]

I am trying to follow the official Nextjs tutorial but I hit an initial roadblock; the first command npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter" returns this error.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: react@16.13.1
npm ERR! node_modules/react
npm ERR!   react@"16.13.1" from the root project
npm ERR!   peer react@"^16.6.0 || ^17" from next@10.0.1
npm ERR!   node_modules/next
npm ERR!     next@"^10.0.0" from the root project
npm ERR!   3 more (react-dom, @next/react-dev-overlay, styled-jsx)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from use-subscription@1.5.0
npm ERR! node_modules/next/node_modules/use-subscription
npm ERR!   use-subscription@"1.5.0" from next@10.0.1
npm ERR!   node_modules/next
npm ERR!     next@"^10.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

System details

• Operating System: Ubuntu 20.04.1
• Nodejs Version: v15.2.0
• npm Version: 7.0.10
• nvm Version: 0.37.0

Could somebody help me resolve this issue?

[joonassandell]

Same here

[hashiromer]

Is learn-starter a different next js template?

[hashiromer]

@joonassandell Hey! I tried to manually install next with react, it still breaks. Could you do npm i react react-dom next let me know the outcome?

[joonassandell]

@joonassandell Hey! I tried to manually install next with react, it still breaks. Could you do npm i react react-dom next let me know the outcome?

Works just fine, no problem, here's the result:

npm i react react-dom next
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated mkdirp@0.5.3: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.

added 844 packages, and audited 844 packages in 51s

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

5 low severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

[hashiromer]

Hey thanks, mine works as well now, didn't change anything. I have no idea why didn't it work before. Anyway, I think I have figured out the culprit behind this error. Turns out the starter template listed 16.13.1 version of both react and react-dom whereas create-next-app pulls 17.0.1 from the registry, leading to dependency conflict. I manually changed the versions and it works (so far, no idea if it broke something).

[ChongLiWonThatFight]

Vercel is clearly a bush league company. Who creates a tutorial that can't even make it past the first CLI command without nuking the setup. ::rolleyes:: Not wasting any more of my time on this nonsense.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: react@19.0.0-rc-6230622a1a-20240610
npm ERR! node_modules/react
npm ERR! react@"19.0.0-rc-6230622a1a-20240610" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@">= 16" from @heroicons/react@2.1.4
npm ERR! node_modules/@heroicons/react
npm ERR! @heroicons/react@"^2.0.18" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see: