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: 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
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 https://github.com/vercel/next-learn/issues/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]

https://github.com/vercel/next-learn/issues/754#issuecomment-2185323453