npm ERR! Could not resolve dependency: npm ERR! peer react@"19.0.0-rc.0" from [email protected]

[scottfennell-toptal]

I'm on chapter 10. Although my project still works locally, I started getting this error in the build logs in vercel:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"19.0.0-rc-f38c22b244-20240704" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"19.0.0-rc.0" from [email protected]
npm ERR! node_modules/next
npm ERR!   next@"15.0.0-canary.56" 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:
npm ERR! /vercel/.npm/_logs/2024-07-12T11_41_02_681Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: /vercel/.npm/_logs/2024-07-12T11_41_02_681Z-debug-0.log
Error: Command "npm install" exited with 1

I can't seem to get past this. Any suggestions?

[romu70]

This is the project which serves as the baseline for the Dashboard tutorial. And as a tutorial, its primary target is people which may not be expert at React and Next because they came here...to learn.

So why targeting RC versions of depencies which may be subject to change and to make this project unusable for the intended audience?

@scottfennell-toptal react and other problematic dependencies should be updated to more stable versions.

[romu70]

Here is how you can get a running project @scottfennell-toptal :

1. Clone the https://github.com/vercel/next-learn repository
2. Copy/paste the next-learn/dashboard/starter-example to where you want your learning project to be located
3. in the package.json file, remove the next, next-auth, react and react-dom lines
4. open a terminal in the project folder and run "npm install next next-auth react react-dom"
5. once done you should be able to run "npm run dev" and get something which starts

[leerob]

This tutorial is intentionally using the RC version, due to the impending stable release, so you don't have the learn that changes between v14 and v15. I can't reproduce issues deploying the final example in this repo to Vercel.

@scottfennell-toptal do you have multiple lockfiles? Are you using pnpm? If you could share your repository on GitHub, that would be very helpful. Thank you.

[jeremypeters]

Just adding to this - was following the tutorial as I haven't touched Next for a while.

When adding "use client"; to the top of nav-links.tsx I got the error Unsupported Server Component type: undefined.

This was fixed by:

$ pnpm remove next $ pnpm add next@latest

To echo what @romu70 said, you shouldn't expect these kind of issues in an official starter tutorial.

Edit:

The next issue is the Vercel build error Type error: Cannot find module '@/app/ui/fonts' or its corresponding type declarations. - the file exists and there are no issues locally.

I don't think I will be continuing with Next - if there are these issues not even halfway through the simple official starter tutorial, what will the issues be like for a full-blown production project?

[michael-dixon]

I faced the same issue, although locally. Since google search sent me to this page, for others that might be facing this on initial create project - I removed the project files (rm -rf nextjs-dashboard), use node > 15 (nvm use 20), and then install pnpm gloabbly (npm install -g pnpm). I had done these on an older node version and it failed both with pnpm and npm. Once these were installed and confirmed, the dashboard project downloaded and built.

[benwatson528]

I can't even get chapter one working at the moment because of the issues mentioned here, this is pretty frustrating. It doesn't seem to help that the tutorial insists on using pnpm, adding a further layer of complexity into the already confusing world of packaging.

I see the webpage for a second then I get an "Application error: a client-side exception has occurred (see the browser console for more information)" error. There are so many logs in my terminal and no clear error or resolution.

[leerob]

@benwatson528 can you try:

npm i -g pnpm
pnpm i

I hear you that having another package manager is confusing. Hopefully the performance improvements from pnpms faster installations and caching makes up for the one time setup 🙏

[gschauhan]

4. npm install next next-auth react react-dom

You can use steps shared by @romu70 (direct link: https://github.com/vercel/next-learn/issues/802#issuecomment-2225807041) It worked for me.

[benwatson528]

@benwatson528 can you try:

npm i -g pnpm
pnpm i

I hear you that having another package manager is confusing. Hopefully the performance improvements from pnpms faster installations and caching makes up for the one time setup 🙏

Hi @leerob I followed those steps in the tutorial to use pnpm but that's what leads to the error I'm seeing. I wasn't able to get the latest version of the tutorial working on Windows 11 with either npm or pnpm. I tried the suggestions in this thread and did a whole bunch of cache clearing but still no luck.

[leerob]

Can you share the error you are seeing in the console?

[benwatson528]

@leerob it's working now, I re-cloned and followed the steps from the tutorial like I'd done a couple of times the other night and this time it worked. Thanks!

[tlhakhan]

I'm running into a similar issue, following the dashboard-app tutorial: https://nextjs.org/learn/dashboard-app/getting-started.

Here are my steps so far to reproduce this. I've deleted everything, rebuilt the container without cache, not sure where I'm going wrong here.

1. Use vanilla VS Code dev container (Debian bookworm).

{
  "name": "Debian",
  "image": "mcr.microsoft.com/devcontainers/base:bookworm"
}

2. I installed nodejs and npm package.

vscode ➜ /workspaces/learn-nextjs (main) $ sudo apt update && sudo apt install -y npm nodejs
vscode ➜ /workspaces/learn-nextjs (main) $ node -v
v18.19.0
vscode ➜ /workspaces/learn-nextjs (main) $ npm -v
9.2.0

3. I ran the tutorial command (without the --use-pnpm flag, because I don't want to use pnpm at the moment).

vscode ➜ /workspaces/learn-nextjs (main) $ npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y
Creating a new Next.js app in /workspaces/learn-nextjs/nextjs-dashboard.

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 ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"19.0.0-rc-f38c22b244-20240704" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@">= 16" from @heroicons/[email protected]
npm ERR! node_modules/@heroicons/react
npm ERR!   @heroicons/react@"^2.1.4" 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:
npm ERR! /home/vscode/.npm/_logs/2024-08-04T18_08_34_525Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vscode/.npm/_logs/2024-08-04T18_08_34_525Z-debug-0.log

Aborting installation.
  npm install has failed.

The error seems to indicate a dependency issue because the project wants to use the latest (rc) react version and heroicons doesn't like it? I'm not sure how to fix this though, I tried the --legacy-peer-deps --force flags.

[tlhakhan]

I missed @romu70's response which includes a workaround. https://github.com/vercel/next-learn/issues/802#issuecomment-2225807041

[elidonner]

@jeremypeters suggestion fixed for me

$ pnpm remove next $ pnpm add next@latest

Error

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Came up in chapter 5 when using 'use client';

[trevorgarr]

+1 getting the same issues as https://github.com/vercel/next-learn/issues/802#issuecomment-2267626425

[itzamanjain]

removing next , react, react dom and installing again via pnpm and pnpm i fixed my issue

[leerob]

Good news, React 19 is now stable and updated here: https://github.com/vercel/next-learn/pull/946

[Dimaaasik]

Use yarn create react-app my-app --template typescript