Chapter 1: install failed

Question

Chapter 1: install failed

vvnab opened this issue 4 months ago · 24 comments

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"

npm resolution error report

While resolving: undefined@undefined
Found: react@19.0.0-rc-6230622a1a-20240610
node_modules/react
react@"19.0.0-rc-6230622a1a-20240610" from the root project

Could not resolve dependency:
peer react@">= 16" from @heroicons/react@2.1.3
node_modules/@heroicons/react
@heroicons/react@"^2.0.18" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Answer 1 · 2024-06-12T07:33:56.000Z

learn nextjs from error...

Answer 2 · 2024-06-12T07:49:41.000Z

giveup npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"

git clone https://github.com/vercel/next-learn/tree/main
cd dashboard/starter-example
pnpm i
pnpm run dev

Answer 3 · 2024-06-12T11:52:54.000Z

The issue can be resolved by upgrading the Node.js version to 18.17.0 or higher.

I had the same error. Since the project was downloaded, I tried installing the npm packages with yarn, but I encountered the following error.

➜  nextjs-dashboard yarn
yarn install v1.22.19
info No lockfile found.
[1/5] 🔍  Validating package.json...
error @: The engine "node" is incompatible with this module. Expected version ">=18.17.0". Got "18.16.1"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

This made me realize there was an issue with the Node.js version. After changing the Node.js version to 20 and reinstalling, the error no longer occurred.

Additionally, the .nvmrc file in this project should be updated to specify the exact version of Node.js required.

Answer 4 · 2024-06-12T12:04:20.000Z

Gave up using npm just use bun instead

bun install v1.1.13 (bd6a6051)
warn: incorrect peer dependency "react@19.0.0-rc-6230622a1a-20240610"

warn: incorrect peer dependency "react-dom@19.0.0-rc-6230622a1a-20240610"

warn: incorrect peer dependency "react@19.0.0-rc-6230622a1a-20240610"

+ @types/bcrypt@5.0.2
+ @types/react@18.2.21 (v18.3.3 available)
+ @types/react-dom@18.2.14 (v18.3.0 available)
+ @vercel/style-guide@5.2.0 (v6.0.0 available)
+ dotenv@16.4.5
+ eslint@8.57.0 (v9.4.0 available)
+ eslint-config-next@15.0.0-rc.0
+ eslint-config-prettier@9.0.0 (v9.1.0 available)
+ prettier@3.3.2
+ prettier-plugin-tailwindcss@0.5.4 (v0.6.3 available)
+ @heroicons/react@2.1.3
+ @tailwindcss/forms@0.5.7
+ @types/node@20.5.7 (v20.14.2 available)
+ @vercel/postgres@0.5.1 (v0.8.0 available)
+ autoprefixer@10.4.15 (v10.4.19 available)
+ bcrypt@5.1.1
+ clsx@2.1.1
+ next@15.0.0-rc.0
+ postcss@8.4.31 (v8.4.38 available)
+ react@19.0.0-rc-6230622a1a-20240610
+ react-dom@19.0.0-rc-6230622a1a-20240610
+ tailwindcss@3.3.3 (v3.4.4 available)
+ typescript@5.2.2 (v5.4.5 available)
+ zod@3.23.8

537 packages installed [42.82s]

Answer 5 · 2024-06-12T20:50:40.000Z

From last commit 11 jun 2024 Delba de Oliveira changed package.json:

"next": "^14.0.2"               to     "next": "15.0.0-rc.0"
"react": "18.2.0"                to      "react": "19.0.0-rc-6230622a1a-20240610",
"react-dom": "18.2.0"       to       "react-dom": "19.0.0-rc-6230622a1a-20240610"

besides, she changed from npx package manager to pnpm package manager.

So the solution that worked for me was:

Install pnpm from https://pnpm.io/installation
(If you are in Windows, after intalling remember to log out and log in again so windows path var gets pnpm to work).
Clone from Github

git clone https://github.com/vercel/next-learn

Update your node version, mine is v22.3.0
In /next-learn/dashboard/starter-example/ edit the file .nvmrc and replace the number to your actual node version.
Finally, in power shell or command shell install it with:

pnpm i

pnpm dev

Remember to install it in In /next-learn/dashboard/starter-example/

There you go! Happy learnning :D

Answer 6 · 2024-06-13T08:35:36.000Z

This was just my personal preference, but if you don't want access to the final-example while learning:

Create/navigate the directory you want to clone into.
Clone the repo but don't checkout.

git clone --filter=blob:none --no-checkout https://github.com/vercel/next-learn

Navigate to the cloned but empty repo

cd next-learn/

Create a sparse checkout.

git sparse-checkout set --cone

Select the main branch.

git checkout main

Clone just the starter-example directory.

git sparse-checkout set dashboard/starter-example

Rejoin quecosita's instructions above and update your /dashboard/starter-example/.nvmrc to your current version of node, followed by running pnpm i & pnpm dev

Answer 7 · 2024-06-14T07:53:20.000Z

Maybe it would be a great idea - for the future - to not commit release candidate versions to the default branch that is used in production... or at least check if it still works then...

My workaround:
Download or checkout commit b7a4366 which is the commit before it broke.

Answer 8 · 2024-06-14T12:56:02.000Z

@AB-xdev 100%. It's bad for NextJS to have potential users become frustrated and have a poor experience because of "broken production." The team at NextJS is very strong, and releasing something half baked shouldn't happen. I send people here often, and just this week I was going through the tutorial myself, to be blocked at square 0.

cc. @rauchg @delbaoliveira

Answer 9 · 2024-06-15T01:01:31.000Z

Worked for me

Install pnpm from https://pnpm.io/installation
git clone https://github.com/vercel/next-learn
cd to starter-example folder
pnpm i
pnpm dev

cc: QUECOSITA

Answer 10 · 2024-06-15T11:31:51.000Z

Worked for me

Install pnpm from https://pnpm.io/installation

git clone https://github.com/vercel/next-learn

cd to starter-example folder

pnpm i

pnpm dev

cc: QUECOSITA

Fixed, but with these warnings/deprecations:

Answer 11 · 2024-06-16T05:19:02.000Z

Getting this error as well. This problem looks to be created from the recent code merged
https://github.com/vercel/next-learn/pull/743/files

@delbaoliveira @leerob

Answer 12 · 2024-06-16T14:20:04.000Z

@blindjedi I had to learn Corepack & pnpm to get things running; corepack enable pnpm, etc. It should be made clear that pnpm is a hard requirement for this to work, which likely throws a lot of us used to other package managers.

Answer 13 · 2024-06-16T16:17:58.000Z

You don't need corepack, but we believe pnpm is a better default so we've updated guidance to start here.

Answer 14 · 2024-06-16T17:42:57.000Z

Worked for me

Install pnpm from https://pnpm.io/installation

git clone https://github.com/vercel/next-learn

cd to starter-example folder

pnpm i

pnpm dev

The above worked for me, but I am getting a big arrow (heroicon arrow), that I think may have been supposed to be besides log in.

Answer 15 · 2024-06-16T18:40:12.000Z

I am not sure is it a right way of handling it, but after getting this error during installation, I went to the nextjs-dashboard folder, in the package.json file I changed back dependencies updated in this commit https://github.com/vercel/next-learn/pull/743/files to:

    "next": "^14.0.2",  
    "react": "18.2.0",
    "react-dom": "18.2.0",

And everything worked as expected after that. It is not an ideal solution, but it unblocked me.

PS

I didn't install PNPM, I am using regular NPM.
To fix the broken UI I imported global styles as it is described here https://nextjs.org/learn/dashboard-app/css-styling

Answer 16 · 2024-06-17T02:43:40.000Z

pnpm install
pnpm run dev

pnpm fixed the installation failed issue, but I received warning issues with unmet peer dependencies:

Answer 17 · 2024-06-17T20:36:02.000Z

Worked for me

Install pnpm from https://pnpm.io/installation

git clone https://github.com/vercel/next-learn

cd to starter-example folder

pnpm i

pnpm dev

The above worked for me, but I am getting a big arrow (heroicon arrow), that I think may have been supposed to be besides log in.

This appears to be intended behavior as the user will soon import the global stylings css file in the next step of the tutorial, fixing the large heroicon arrow.

Several workarounds will end up in the same spot, as the line import '@/app/ui/global.css'; is not included from the /app/layout.tsx file to begin with.

Answer 18 · 2024-06-17T20:55:18.000Z

Getting this error as well. This problem looks to be created from the recent code merged https://github.com/vercel/next-learn/pull/743/files

The problem seems to be a react version mismatch.

The @heroicons/react package expects a react version greater than or equal to version 16, but the latest commit (58f9a68) specified an install of react version 19.0.0-rc-6230622a1a-20240610.

According to the semantic versioning documentation, the prerelease candidate tag -rc makes it so that the installed version of react would not satisfy @heroicons/react's react version requirement of >=16, despite it technically being a more recent version.

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: undefined@undefined
npm error Found: react@19.0.0-rc-6230622a1a-20240610
npm error node_modules/react
npm error   react@"19.0.0-rc-6230622a1a-20240610" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@">= 16" from @heroicons/react@2.1.3
npm error node_modules/@heroicons/react
npm error   @heroicons/react@"^2.0.18" from the root project

Answer 19 · 2024-06-18T14:36:49.000Z

Worked for me

Install pnpm from https://pnpm.io/installation

git clone https://github.com/vercel/next-learn

cd to starter-example folder

pnpm i

pnpm dev

cc: QUECOSITA

Alternatively, you can just replace npx from the original command with pnpm dlx, instead of cloning the repo:

pnpm dlx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"

Worked just fine for me, with no warnings whatsoever:

Answer 20 · 2024-06-19T01:49:38.000Z

--legacy-peer-deps worked for me

Answer 21 · 2024-06-19T07:49:54.000Z

From last commit 11 jun 2024 Delba de Oliveira changed package.json:
"next": "^14.0.2"               to     "next": "15.0.0-rc.0"
"react": "18.2.0"                to      "react": "19.0.0-rc-6230622a1a-20240610",
"react-dom": "18.2.0"       to       "react-dom": "19.0.0-rc-6230622a1a-20240610"
besides, she changed from npx package manager to pnpm package manager.

So the solution that worked for me was:

Install pnpm from https://pnpm.io/installation
(If you are in Windows, after intalling remember to log out and log in again so windows path var gets pnpm to work).

Clone from Github

git clone https://github.com/vercel/next-learn

Update your node version, mine is v22.3.0

In /next-learn/dashboard/starter-example/ edit the file .nvmrc and replace the number to your actual node version.

Finally, in power shell or command shell install it with:

pnpm i

pnpm dev

Remember to install it in In /next-learn/dashboard/starter-example/

There you go! Happy learnning :D

Thank you! I'm ok using pnpm 💯

Answer 22 · 2024-06-20T19:41:55.000Z

Does using pnpm resolve the issue with importing useActionState hook from react@rc ?

I can run the project as normal after cloning it, but in Chapter 14 of the Learn Next tutorial, it implements this hook which happens to be only available in React Canary and Experimental versions. I get the same error reported in this ticket when trying to update React, React-Dom and Next to the bleeding edge versions just to have access to this hook. Anybody have a workaround?

Answer 23 · 2024-06-23T16:16:32.000Z

I'm writing to provide an alternative solution and to hopefully remind the devs for an urgent solution. Take my suggestion below with a kilo of salt as I opened next.js website to learn it but here I am trying to fix things before learning starts.

git clone https://github.com/vercel/next-learn.git
cd next-learn
git reset --hard b7a4366
cd dashboard/starter-example
npm install -g pnpm
pnpm i
pnpm dev

Answer 24 · 2024-06-23T21:07:57.000Z

#754 (comment)