Learn Next.js tutorial bug

[trichask]

Summary

Hello there, I am trying to follow through the Lern Next.js tutorial.

When running this command:

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

I get this error:

Downloading files from repo https://github.com/vercel/next-learn/tree/main/dashboard/starter-example. This might take a moment.

Installing packages. This might take a couple of minutes.

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: undefined@undefined
npm error Found: [email protected]
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/[email protected]
npm error node_modules/@heroicons/react
npm error   @heroicons/react@"^2.0.18" 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.

[maximn]

+1
Woraround - run 'npm install --force' within the project folder.

Duplicate of #747

[Nullises]

+1 Woraround - run 'npm install --force' within the project folder.

Duplicate of #747

Example is broken

[Tyru5]

+1 Woraround - run 'npm install --force' within the project folder.
Duplicate of #747

Example is broken

The example application isn't broken, rather, you haven't imported the global.scss file into the Root layout (layout.tsx) file.

[oussjarrousse]

Hello thank you for the example, and the free content. I am a little bit disappointed though, because surely, you could do better than a buggy 1st step in the Getting Started tutorial... that requires a workaround.

[affanmustafa]

Hello thank you for the example, and the free content. I am a little bit disappointed though, because surely, you could do better than a buggy 1st step in the Getting Started tutorial... that requires a workaround.

If you're referring to the styles and them not being imported then I can see that this was most likely intentional to teach the people how importing them would go. The next chapter (Chapter 2) is only on that. I don't think that's a buggy step though

[oussjarrousse]

Hello thank you for the example, and the free content. I am a little bit disappointed though, because surely, you could do better than a buggy 1st step in the Getting Started tutorial... that requires a workaround.

If you're referring to the styles and them not being imported then I can see that this was most likely intentional to teach the people how importing them would go. The next chapter (Chapter 2) is only on that. I don't think that's a buggy step though

Hello. Yes i get the educational value of moving styling to chapter 2, but I was referring to the error that @trichask mentioned in the bug summary (see above). That's in chapter 1 and is related to installation of the example, not related to style.

[ChongLiWonThatFight]

2nd oussjrarousse's sentiments. This tutorial is garbage. Wasted a few hours trying to figure out what I was doing wrong to get the tutorial to load...if vercel wants people to use their framework - the tutorials shouldn't be throwing curveballs or 'workarounds' to people that are new to it out of the gate...

[GuiTarSparTan]

This is an error that happens when libraries like @react-hero icons get updated. While the force command might solve the problem, it is not the right way to do it (not a good programming practice). Still taking into account this needs to be fixed by the authors of the tutorial you might as well fix it by using the --force command.

[mattlayton1986]

I encountered this issue as well and was successful at resolving it by:

1. Deleting package-lock.json / pnpm-lock.yaml
2. Removing @heroicons/react from dependencies in package.json
3. Installing latest version of react, react-dom, next, and heroicons with npm install react@latest react-dom@latest next@latest @heroicons/react@latest

It seems that the versions of react and react-dom used in the example project are release candidates and the version of NextJs is a public beta, so they may not play nicely with the version of @heroicons/react that the project is trying to use. Updating all packages to the latest stable release seemed to fix this issue for me.

[leerob]

#754 (comment)

[ideatrails]

I encountered this issue as well and was successful at resolving it by:

1. Deleting package-lock.json / pnpm-lock.yaml
2. Removing @heroicons/react from dependencies in package.json
3. Installing latest version of react, react-dom, next, and heroicons with npm install react@latest react-dom@latest next@latest @heroicons/react@latest

It seems that the versions of react and react-dom used in the example project are release candidates and the version of NextJs is a public beta, so they may not play nicely with the version of @heroicons/react that the project is trying to use. Updating all packages to the latest stable release seemed to fix this issue for me.

I had to use next@canary for example:

npm install react@latest react-dom@latest next@canary @heroicons/react@latest

This is because later in the tutorial you need it.

"The experimental.ppr preview feature can only be enabled when using the latest canary version of Next.js. See more info here: https://nextjs.org/docs/messages/ppr-preview"

Tthere is still a build error trying to build the final solution using npm.
app/dashboard/customers/page.tsx
Type error: Type '{ searchParams?: { query?: string | undefined; page?: string | undefined; } | undefined; }' does not satisfy the constraint 'PageProps'.
Types of property 'searchParams' are incompatible.
Type '{ query?: string | undefined; page?: string | undefined; } | undefined' is not assignable to type 'Promise | undefined'.
Type '{ query?: string | undefined; page?: string | undefined; }' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag]

[robeeds]

I came across the same issue. Trying to finish last few chapters, but this error keeps coming up and I can't find any other similar posts.

A workaround can be seen here
payloadcms/payload#8463 (comment)

[painhardcore]

I'm new to nextjs and I was fighting this issue so hard in the tutorial....