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

[TaifurIslamAshraf]

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: react@19.0.0-rc-69d4b800-20241021
npm error Could not resolve dependency:
npm error peer react@"^16.x || ^17.x || ^18.x" from @radix-ui/react-icons@1.3.0

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:

1. Update @radix-ui/react-icons peer dependencies to include React 19
2. Add a note in the documentation about React 19 compatibility
3. 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

2. During the setup, select 'yes' for App Router and other default options

3. Navigate to the project directory:
   bash
   cd my-app

4. Try to initialize shadcn-ui:
   bash
   npx shadcn@latest init

5. Select configuration options:

   • Style: New York
   • Base color: Neutral
   • CSS variables: Yes

6. The installation will fail during the dependency installation step with the following error:

   npm error ERESOLVE unable to resolve dependency tree
   npm error Found: react@19.0.0-rc-69d4b800-20241021
   npm error Could not resolve dependency:
   npm error peer react@"^16.x || ^17.x || ^18.x" from @radix-ui/react-icons@1.3.0

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

[Gitstar-OC]

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

[Gitstar-OC]

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

[Gitstar-OC]

Do you need a temporary solution for this ?

[needim]

you can use overrides for a temporary fix.

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

Warning

This is just a temporary fix!

[dx1ded]

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

[Gitstar-OC]

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]

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:

1. Created a repo with npx shadcn/ui@latest init, using New York as the style and including @radix-ui/react-icons.
2. Added some components with npx shadcn/ui@latest add ... and made sure to use some icons from @radix-ui/react-icons.
3. Verified everything ran fine in Next.js 14.
4. Ran the codemod to upgrade: npx @next/codemod@canary upgrade latest.
5. 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:types-react@19.0.0-rc.1",
      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
    }
  }

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]

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]

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

[Alienimnida]

I keep getting this error what should I do?

[TaifurIslamAshraf]

I found a solution. Use pnpm package manager

[Alienimnida]

Just using pnpm solves it?

[TaifurIslamAshraf]

Yes

[Jacksonmills]

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

[Alienimnida]

Nahh man it must be due to the new release ig

[tutorialsmaterials]

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

[shadcn]

Can someone confirm if this it works with pnpm please?

pnpm dlx shadcn@latest init

[shadcn]

I'm bringing back the flags (temporarily).

[rishi-novo]

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

[souvik-basak]

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]

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

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

1. pnpm dlx create-next-app@latest
2. pnpm dlx shadcn@latest init

Maybe try again today?

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

1. npx create-next-app@14
2. npx shadcn@latest init

[jdhrivas]

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/experimental-nextjs-app-support@0.11.3
npm error Found: next@15.0.2
npm error node_modules/next
npm error   peer next@"^14.0.0-0 || ^15.0.0-0" from next-auth@5.0.0-beta.25
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/experimental-nextjs-app-support@0.11.3
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: next@15.0.0-rc.0
npm error node_modules/next
npm error   peer next@"^13.4.1 || ^14.0.0 || 15.0.0-rc.0" from @apollo/experimental-nextjs-app-support@0.11.3
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]

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

[nemanjam]

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

[jasonjos111]

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: next-auth@4.24.8
Found: next@15.0.3
node_modules/next
  next@"^15.0.3" from the root project

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

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

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]

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]

@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]

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🤒

[MarwanBDdev]

Error with Radix UI Menu: Module Not Found for @radix-ui/react-dismissable-layer

I’m encountering the following error when running pnpm run dev

⨯ ./node_modules/.pnpm/https://github.com/radix-ui+react-menu@[2.1.2_@types](mailto:2.1.2_@types)+react-dom@[18.3.1_@types](mailto:18.3.1_@types)+react@[18.3.12_react-dom@19.0.0-rc-0_o4jcdnyvzxbdzi7cnpkmx2wl2q](mailto:18.3.12_react-dom@19.0.0-rc-0_o4jcdnyvzxbdzi7cnpkmx2wl2q)/node_modules/@radix-ui/react-menu/dist/index.mjs:10:1
Module not found: Can't resolve '@radix-ui/react-dismissable-layer'
8 | import { createContextScope } from "@radix-ui/react-context";
9 | import { useDirection } from "@radix-ui/react-direction";

10 | import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
11 | import { useFocusGuards } from "@radix-ui/react-focus-guards";
12 | import { FocusScope } from "@radix-ui/react-focus-scope";
13 | import { useId } from "@radix-ui/react-id";

https://nextjs.org/docs/messages/module-not-found

The error occurs during pnpm run dev, but pnpm run build works fine.

Steps Taken
Verified that packages are installed.
Attempted reinstalling dependencies with pnpm install.

Environment
Package manager: pnpm
React version: 19.0.0-rc-02c0e824-20241028

pnpm run build: Works
pnpm run dev: Error

Any suggestions or fixes would be greatly appreciated

[fabioMacieira16]

run the command :
1 - npm install next@latest react@latest react-dom@latest
2 - npm run-script build
3- npm run start

[Fearless09]

This fixed the error for me

{
  "packageManager": "npm@10.5.2",
  "overrides": {
    "react": "$react",
    "react-dom": "$react-dom"
  },
  "dependencies": {
    "again": "^0.0.1",
    "next": "15.0.1",
    "next-auth": "^5.0.0-beta.25",
    "react": "19.0.0-rc-69d4b800-20241021",
    "react-dom": "19.0.0-rc-69d4b800-20241021"
  }
}

I found the solution on here: https://github.com/vercel/next.js/issues/72204.

• Note React version 19 has not been released officially

[jacobsamo]

Getting the same issues as @jasonjos111,

@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:

Setup:

• Package manager: bun v1.1.36
• system i am expericing the issue on: MacOS 14.5 & Window 11
• React version: react@19.0.0-rc.1, react-dom@19.0.0-rc.1

Errors:

What is see in my UI components:

Type 'ForwardRefExoticComponent<AccordionItemProps & RefAttributes<HTMLDivElement>>' does not satisfy the constraint 'keyof IntrinsicElements | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any) => ReactNode)'.
  Type 'ForwardRefExoticComponent<AccordionItemProps & RefAttributes<HTMLDivElement>>' is not assignable to type 'ForwardRefExoticComponent<any>'.
    Type 'React.ReactNode' is not assignable to type 'import("/Users/jacob/Documents/GitHub/BuzzTrip/apps/web/node_modules/@types/react/index").ReactNode'.
      Type 'bigint' is not assignable to type 'ReactNode'.

what is see when consuming my components:

'Button' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'import("/Users/jacob/Documents/GitHub/BuzzTrip/apps/web/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type 'ReactElement<unknown, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
          Property 'children' is missing in type 'ReactElement<unknown, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

Not sure how to fix this issue, i have tried setting npm config set legacy-peer-deps true didn't fix anything.

The repo: https://github.com/jacobsamo/BuzzTrip/tree/improve-web

[zipme]

Getting the same issues as @jasonjos111,

@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:

Setup:

• Package manager: bun v1.1.36
• system i am expericing the issue on: MacOS 14.5 & Window 11
• React version: react@19.0.0-rc.1, react-dom@19.0.0-rc.1

Errors:

What is see in my UI components:

Type 'ForwardRefExoticComponent<AccordionItemProps & RefAttributes<HTMLDivElement>>' does not satisfy the constraint 'keyof IntrinsicElements | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any) => ReactNode)'.
  Type 'ForwardRefExoticComponent<AccordionItemProps & RefAttributes<HTMLDivElement>>' is not assignable to type 'ForwardRefExoticComponent<any>'.
    Type 'React.ReactNode' is not assignable to type 'import("/Users/jacob/Documents/GitHub/BuzzTrip/apps/web/node_modules/@types/react/index").ReactNode'.
      Type 'bigint' is not assignable to type 'ReactNode'.

what is see when consuming my components:

'Button' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'import("/Users/jacob/Documents/GitHub/BuzzTrip/apps/web/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type 'ReactElement<unknown, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
          Property 'children' is missing in type 'ReactElement<unknown, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

Not sure how to fix this issue, i have tried setting npm config set legacy-peer-deps true didn't fix anything.

The repo: https://github.com/jacobsamo/BuzzTrip/tree/improve-web

Try this: In https://github.com/jacobsamo/BuzzTrip/blob/improve-web/package.json add the following:

 "overrides": {
    "@types/react": "npm:types-react@19.0.0-rc.1",
    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
  }

Then delete all the node_modules and re-run bun i

[2Senn]

Anyone know how to fix the error 'button cannot be used as a JSX component' in a turborepo? I have to add pnpm overrides in the root workspace but that is also giving me an error

[CryptoNinja0331]

npm config set legacy-peer-deps true

This works very well

[aifirstd3v]

For NextJS15 and React19, if you use bun, add this. I think this is a temporary solution!

"overrides": {
    "react-is": "$react-is",
    "@types/react": "npm:types-react@19.0.0-rc.1",
    "@types/react-dom": "$@types/react-dom-rc.1"
  },
"resolutions": {
    "@types/react": "npm:types-react@19.0.0-rc.1",
    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
  }

[candle-admin]

I also see this issue.

[stevenlei]

Could be a temporary solution, this works for me:

npm install date-fns --legacy-peer-deps

[avijit-shihaan]

Nextjs got updated with react stable , why are still getting the force or legacy deps warning?

[hamidradical]

Any update regarding nextjs15 and other one more library that creates problem for installation:- Radix?