[bug]: Installation fails with Next.js 15 and/or React 19 #5557

TaifurIslamAshraf · 2024-10-24T16:22:08Z

Describe the bug

While initializing a new Next.js project with shadcn-ui using npx shadcn@latest init, the installation fails when attempting to install dependencies. The error occurs because @radix-ui/react-icons has a peer dependency requirement for "react@^16.x || ^17.x || ^18.x", but the project is using React 19.0.0-rc-69d4b800-20241021.

Error message:
npm error ERESOLVE unable to resolve dependency tree
npm error Found: [email protected]
npm error Could not resolve dependency:
npm error peer react@"^16.x || ^17.x || ^18.x" from @radix-ui/[email protected]

Current environment:

Next.js 15
React 19.0.0-rc-69d4b800-20241021
npm (latest version)
shadcn-ui (latest version)

The installation works fine with React 18, suggesting that @radix-ui/react-icons needs to be updated to support React 19 release candidates.

Potential solutions:

Update @radix-ui/react-icons peer dependencies to include React 19
Add a note in the documentation about React 19 compatibility
Add a version check in the CLI to warn users about React 19 compatibility issues

Affected component/components

shadcn-ui installation fails

How to reproduce

Steps to reproduce:

1. Create a new Next.js project with experimental features:
   ```bash
   npx create-next-app@latest my-app --typescript --tailwind --app

During the setup, select 'yes' for App Router and other default options
Navigate to the project directory:
bash
cd my-app
Try to initialize shadcn-ui:
bash
npx shadcn@latest init
Select configuration options:
- Style: New York
- Base color: Neutral
- CSS variables: Yes
The installation will fail during the dependency installation step with the following error:

npm error ERESOLVE unable to resolve dependency tree
npm error Found: [email protected]
npm error Could not resolve dependency:
npm error peer react@"^16.x || ^17.x || ^18.x" from @radix-ui/[email protected]

You can verify the React version in your package.json:
{
"dependencies": {
"react": "19.0.0-rc-69d4b800-20241021",
"react-dom": "19.0.0-rc-69d4b800-20241021"
}
}

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

System Information:

Operating System:
- Windows 8
- Working in Command Prompt

Node Environment:
- Node.js version: v20.17.0
- npm version: v10.9.0

Project Dependencies:
- Next.js: 15
- React: 19.0.0-rc-69d4b800-20241021
- React DOM: 19.0.0-rc-69d4b800-20241021
- Typescript: ^5
- Tailwind CSS: ^3.4.1

CLI Versions:
- create-next-app: latest
- shadcn-ui CLI: latest (@shadcn/ui)

Additional Context:
- Fresh installation with default configurations
- Using App Router
- Project created with TypeScript and Tailwind CSS enabled

Before submitting

I've made research efforts and searched the documentation
I've searched for existing issues

The text was updated successfully, but these errors were encountered:

Gitstar-OC · 2024-10-24T18:04:42Z

Yeah, it is also coming for me do you got any solution ?

Gitstar-OC · 2024-10-24T18:05:02Z

I need this urgently, is there any other solution for this ?

Gitstar-OC · 2024-10-24T18:24:13Z

Do you need a temporary solution for this ?

needim · 2024-10-24T19:08:32Z

you can use overrides for a temporary fix.

"overrides": {
	"react": "$react",
	"react-dom": "$react-dom"
}

Warning

This is just a temporary fix!

dx1ded · 2024-10-24T19:19:44Z

You can also use: npm config set legacy-peer-deps true

Gitstar-OC · 2024-10-24T19:58:24Z

You can also use: npm config set legacy-peer-deps true

No, it did not work for me I tried it. I just cloned old next js project I created in previous week and started using it for development, will change to nextjs 15 after the pr is merged.

Jacksonmills · 2024-10-24T21:57:30Z

Hey @TaifurIslamAshraf,

I tested out this scenario and was able to get shadcn-ui running smoothly with the New York theme and the @radix-ui/react-icons package.

Here's what I did:

Created a repo with npx shadcn/ui@latest init, using New York as the style and including @radix-ui/react-icons.
Added some components with npx shadcn/ui@latest add ... and made sure to use some icons from @radix-ui/react-icons.
Verified everything ran fine in Next.js 14.
Ran the codemod to upgrade: npx @next/codemod@canary upgrade latest.
Placed an @radix-ui/react-icons icon on the homepage for testing.

Everything worked both locally and in production without issues.

Prod links:
Home page
Dashboard page

For reference, here are some key details about my setup:

Next.js: 15.0.1
React: 19.0.0-rc-69d4b800-20241021
React DOM: 19.0.0-rc-69d4b800-20241021
@radix-ui/react-icons: ^1.3.0
Tailwind CSS: ^3.4.1
TypeScript: ^5
package manager: pnpm 9.9.0

"pnpm": {
    "overrides": {
      "@types/react": "npm:[email protected]",
      "@types/react-dom": "npm:[email protected]"
    }
  }

Feel free to check out the repo directly here: GitHub Repo to make sure everything is set up correctly. Let me know if you need more details or if there's anything else I can help test!

audionai · 2024-10-27T06:17:46Z

i got this like error but u can fix in package.json
react version must less that 18;
and also react dom less 18;

"devDependencies": {
   "@types/node": "^20", 
   "@types/react": "^18",  <<here
   "@types/react-dom": "^18", <<
   "eslint": "^8",

Allan2000-Git · 2024-10-27T10:53:46Z

Solution is to install react@18 and react-dom@18. It'll temporarily solve the issue.

Alienimnida · 2024-10-27T15:30:08Z

I keep getting this error what should I do?

TaifurIslamAshraf · 2024-10-27T15:32:29Z

I found a solution. Use pnpm package manager

Alienimnida · 2024-10-27T15:34:06Z

Just using pnpm solves it?

TaifurIslamAshraf · 2024-10-27T15:35:15Z

Yes

Jacksonmills · 2024-10-27T16:07:25Z

I guess that's why my setup had no issues then, using pnpm

Alienimnida · 2024-10-27T16:30:50Z

Nahh man it must be due to the new release ig

tutorialsmaterials · 2024-10-27T18:18:13Z

check the blog solve this problem
https://tutorialsmaterial.com/post/ShadCn-Nextjs-15

shadcn · 2024-10-28T16:14:15Z

Can someone confirm if this it works with pnpm please?

pnpm dlx shadcn@latest init

Jacksonmills · 2024-10-30T21:21:45Z

@Jacksonmills did this radix-ui/icons#184 work for you? It did not fix it for me:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"19.0.0-rc-02c0e824-20241028" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.x || ^17.x || ^18.x || ^19.x" from @radix-ui/[email protected]
npm ERR! node_modules/@radix-ui/react-icons
npm ERR!   @radix-ui/react-icons@"^1.3.1" 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! /Users/wilfred/.npm/_logs/2024-10-30T20_46_44_479Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/wilfred/.npm/_logs/2024-10-30T20_46_44_479Z-debug-0.log

I think 19.0.0-rc needs to be explicitly in peer dep list?

are you using npm? and you used one of the --force or --legacy-peer-deps?

wilfreddenton · 2024-10-30T21:23:51Z

I am using npm and have been using --force to get past these errors. I was under the impression that updating to 1.3.1 would allow me to not have to use --force anymore.

Jacksonmills · 2024-10-30T21:26:55Z

It could be its not released yet on radix side, not quite sure. I will try and reproduce this myself...

Okay I can also confirm you still are required to --force or --legacy-peer-deps even with the most recent release of react-icons, might not be in the release yet

Abenezer-berhanu · 2024-10-31T09:34:49Z

i add shad cn components with --legacy-peer-deps and in development it works very well as well as when i build it locally it used to work as it expected but when i try to deploy it on vercel it's giving me the error

tsemachh · 2024-10-31T13:57:06Z

@shadcn - looks like pacocoursey/cmdk#318 was merged and release was issued when are we going to have this in shadcn release?

Jacksonmills · 2024-10-31T15:37:27Z

i add shad cn components with --legacy-peer-deps and in development it works very well as well as when i build it locally it used to work as it expected but when i try to deploy it on vercel it's giving me the error

you will need to make sure your vercel "Build & Development Settings" Install command is also set to npm install --force/--legacy-peer-deps

links to prod example:
https://shadcn-10-29-24-04.vercel.app/
https://shadcn-10-29-24-04.vercel.app/dashboard

travisluong · 2024-11-03T03:28:21Z

is there a way to skip the interactive prompt that asks for --force or --legacy-peer-deps? the -y flag to skip confirmation doesn't seem to work. i need to be able to run the init command and add command programmatically without the prompt coming up. things were working fine before, but with the new changes, the prompt causes my scripts to hang.

irfanbakhtiar · 2024-11-03T10:33:24Z

You can also use: npm config set legacy-peer-deps true

Thanks, it works.

Jacksonmills · 2024-11-03T17:49:28Z

I noticed an influx of similar errors being reported overnight, particularly involving recent versions of Next.js, shadcn, and React 19 when using npx. Given the recurring nature of these issues, I wanted to verify them firsthand to understand the root cause better.

Here's what I did:

Ran npx create-next-app@latest.
Initialized shadcn with npx shadcn@latest init -d.

The result was the same common error we've all been seeing. Initially, we had a temporary fix by suggesting the use of --force or --legacy-peer-deps flags, but it seems these might have been removed from the CLI a bit prematurely, as the errors are still present in the most recent builds of Next.js, shadcn, and React 19 when using npx.

For reference, here are the latest related bug reports:

✨ FYI: pnpm dlx still works just fine! Here's an example image showing it working smoothly with the same setup:

shadcn · 2024-11-03T18:34:44Z

@Jacksonmills thanks for the detailed write-up. I’m surprised this is still an issue. Tested this a few times yesterday. I’ll take a look.

Jacksonmills · 2024-11-03T18:36:16Z

@Jacksonmills thanks for the detailed write-up. I’m surprised this is still an issue. Tested this a few times yesterday. I’ll take a look.

Let me know if I can help test anything specific if needed

lanzclintonv · 2024-11-04T03:55:53Z

I'm also having this issue when creating from a new Next JS project. Confirmed that this happens with v2.1.4 via npx [email protected] init.

v2.1.3 works fine and allows me to select --force or --legacy-peer-deps

shadcn · 2024-11-04T13:14:39Z

I'm bringing back the flags (temporarily).

rishi-novo · 2024-11-05T09:46:25Z

Does this issue still exists or am I messing up with something?

souvik-basak · 2024-11-05T14:04:02Z

I’m unsure what went wrong with shadcn; it also doesn't work with the previous version of next.js. I am using version 14.2.16.

Jacksonmills · 2024-11-05T14:22:18Z

Does this issue still exists or am I messing up with something?

I cannot reproduce this error, here's what I did:

pnpm dlx create-next-app@latest
pnpm dlx shadcn@latest init

Maybe try again today?

Same in both of your cases... Next 14 successfully init's using npx

npx create-next-app@14
npx shadcn@latest init

jdhrivas · 2024-11-05T15:39:33Z

The issue I noticed is not related to shadcn-ui but other dependencies and is prevents schadcn-ui adding components or init

Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.

Command failed with exit code 1: npm install @radix-ui/react-toast
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @apollo/[email protected]
npm error Found: [email protected]
npm error node_modules/next
npm error   peer next@"^14.0.0-0 || ^15.0.0-0" from [email protected]
npm error   node_modules/next-auth
npm error     next-auth@"^5.0.0-beta.25" from the root project
npm error   next@"^15.0.2" from the root project
npm error
npm error Could not resolve dependency:
npm error peer next@"^13.4.1 || ^14.0.0 || 15.0.0-rc.0" from @apollo/[email protected]
npm error node_modules/@apollo/experimental-nextjs-app-support
npm error   @apollo/experimental-nextjs-app-support@"^0.11.3" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/next
npm error   peer next@"^13.4.1 || ^14.0.0 || 15.0.0-rc.0" from @apollo/[email protected]
npm error   node_modules/@apollo/experimental-nextjs-app-support
npm error     @apollo/experimental-nextjs-app-support@"^0.11.3" from the root project

In my case npm config set legacy-peer-deps true resolved the issue.

shadcn · 2024-11-05T17:43:57Z

@rishi-novo @souvik-basak I can't reproduce. can you access https://ui.shadcn.com/r/styles/default/utils.json?

nemanjam · 2024-11-08T05:39:25Z

Why npx shadcn@latest init just installs Next.js 14 and React 18, nothing is updated?

jasonjos111 · 2024-11-09T19:28:00Z

I am also facing the installation error
There is no problem for most of the components but for some components like 'Alert Dialog' , I am getting this error

# npm resolution error report

While resolving: [email protected]
Found: [email protected]
node_modules/next
  next@"^15.0.3" from the root project

Could not resolve dependency:
peer next@"^12.2.5 || ^13 || ^14" from [email protected]
node_modules/next-auth
  next-auth@"^4.24.8" from the root project

Conflicting peer dependency: [email protected]
node_modules/next
  peer next@"^12.2.5 || ^13 || ^14" from [email protected]
  node_modules/next-auth
    next-auth@"^4.24.8" 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.

Any help?

Abood2284 · 2024-11-11T13:14:24Z

I believe ShadCN is not stable with the latest NextJs 15 release

I can not add components, but some specific components are throwing random errors

~ button : bunx --bun shadcn@latest add button

~ alert dialog: bunx --bun shadcn@latest add alert-dialog

Whole file is diagnosed with errors

any help?

jasonjos111 · 2024-11-11T13:39:19Z

I believe ShadCN is not stable with the latest NextJs 15 release

I can not add components, but some specific components are throwing random errors

~ button : bunx --bun shadcn@latest add button
~ alert dialog: bunx --bun shadcn@latest add alert-dialog
Whole file is diagnosed with errors

any help?

If your new components have conflicting dependencies already installed you may get an error,
--legacy-peer-deps is a temporary fix

Abood2284 · 2024-11-11T14:51:15Z

@jasonjos111 this command doesn't seem to work on workspaces: npm config set legacy-peer-deps true

this is what i get if i run this command inside my NextJs project inside a monorepo

well if i run this command: npm config set legacy-peer-deps true
in the root of my monorepo

i don't get any output- meaning it works.

But the error is still there:

Svendolin · 2024-11-13T20:00:08Z

So it is definitely an issue with next.js Version 15.

I have taken the trouble to go back to the oldest Next version 14, to 14.2.14 to be precise.
Of course it's not really completely solved, but with this version I no longer have any error messages and can continue working with Shadcnui-

In my current repo I have described at the bottom under DEBUGGING and ERROR LOG how I went back to V14 and was able to continue working.: https://github.com/Svendolin/Bachelor-Project-SKA2025

I hope we can jump back to V15 at some point🤒

TaifurIslamAshraf added the bug Something isn't working label Oct 24, 2024

shadcn self-assigned this Oct 28, 2024

travisluong mentioned this issue Nov 3, 2024

Not working shadrizz/shadrizz#4

Open

[bug]: Installation fails with Next.js 15 and/or React 19 #5557

[bug]: Installation fails with Next.js 15 and/or React 19 #5557

Comments

TaifurIslamAshraf commented Oct 24, 2024

Describe the bug

Affected component/components

How to reproduce

Codesandbox/StackBlitz link

Logs

System Info

Before submitting

Gitstar-OC commented Oct 24, 2024

Gitstar-OC commented Oct 24, 2024

Gitstar-OC commented Oct 24, 2024

needim commented Oct 24, 2024

dx1ded commented Oct 24, 2024

Gitstar-OC commented Oct 24, 2024

Jacksonmills commented Oct 24, 2024 • edited Loading

audionai commented Oct 27, 2024 • edited Loading

Allan2000-Git commented Oct 27, 2024

Alienimnida commented Oct 27, 2024

TaifurIslamAshraf commented Oct 27, 2024

Alienimnida commented Oct 27, 2024

TaifurIslamAshraf commented Oct 27, 2024

Jacksonmills commented Oct 27, 2024 • edited Loading

Alienimnida commented Oct 27, 2024

tutorialsmaterials commented Oct 27, 2024 • edited Loading

shadcn commented Oct 28, 2024

Jacksonmills commented Oct 30, 2024

wilfreddenton commented Oct 30, 2024

Jacksonmills commented Oct 30, 2024 • edited Loading

Abenezer-berhanu commented Oct 31, 2024

tsemachh commented Oct 31, 2024

Jacksonmills commented Oct 31, 2024 • edited Loading

travisluong commented Nov 3, 2024 • edited Loading

irfanbakhtiar commented Nov 3, 2024

Jacksonmills commented Nov 3, 2024

shadcn commented Nov 3, 2024

Jacksonmills commented Nov 3, 2024

lanzclintonv commented Nov 4, 2024

shadcn commented Nov 4, 2024

rishi-novo commented Nov 5, 2024

souvik-basak commented Nov 5, 2024

Jacksonmills commented Nov 5, 2024 • edited Loading

jdhrivas commented Nov 5, 2024

shadcn commented Nov 5, 2024

nemanjam commented Nov 8, 2024

jasonjos111 commented Nov 9, 2024

Abood2284 commented Nov 11, 2024

jasonjos111 commented Nov 11, 2024

Abood2284 commented Nov 11, 2024

Svendolin commented Nov 13, 2024

Jacksonmills commented Oct 24, 2024 •

edited

Loading

audionai commented Oct 27, 2024 •

edited

Loading

Jacksonmills commented Oct 27, 2024 •

edited

Loading

tutorialsmaterials commented Oct 27, 2024 •

edited

Loading

Jacksonmills commented Oct 30, 2024 •

edited

Loading

Jacksonmills commented Oct 31, 2024 •

edited

Loading

travisluong commented Nov 3, 2024 •

edited

Loading

Jacksonmills commented Nov 5, 2024 •

edited

Loading