[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

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🤒

MarwanBDdev · 2024-11-18T05:37:28Z

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@[[email protected]_o4jcdnyvzxbdzi7cnpkmx2wl2q](mailto:[email protected]_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 · 2024-11-20T01:23:38Z

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

Fearless09 · 2024-11-20T12:27:20Z

This fixed the error for me

{
  "packageManager": "[email protected]",
  "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 · 2024-11-25T00:31:02Z

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: [email protected], [email protected]

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 · 2024-11-27T17:32:17Z

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: [email protected], [email protected]

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:[email protected]",
    "@types/react-dom": "npm:[email protected]"
  }

Then delete all the node_modules and re-run bun i

2Senn · 2024-12-05T17:15:27Z

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 · 2024-12-09T08:11:31Z

npm config set legacy-peer-deps true

This works very well

aifirstd3v · 2024-12-09T15:29:45Z

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:[email protected]",
    "@types/react-dom": "$@types/react-dom-rc.1"
  },
"resolutions": {
    "@types/react": "npm:[email protected]",
    "@types/react-dom": "npm:[email protected]"
  }

candle-admin · 2024-12-11T20:53:06Z

I also see this issue.

stevenlei · 2024-12-13T01:40:40Z

Could be a temporary solution, this works for me:

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

avijit-shihaan · 2024-12-14T10:15:10Z

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

hamidradical · 2024-12-18T05:47:17Z

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

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

shadcn self-assigned this Oct 28, 2024

Svendolin mentioned this issue Dec 2, 2024

Installation fails with Next.js 15 and shadcn-ui to add a button for my searchbar Svendolin/Bachelor-Project-SKA2025#1

Closed

[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

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

MarwanBDdev commented Nov 18, 2024

fabioMacieira16 commented Nov 20, 2024 • edited Loading

Fearless09 commented Nov 20, 2024

jacobsamo commented Nov 25, 2024

Setup:

Errors:

zipme commented Nov 27, 2024

Setup:

Errors:

2Senn commented Dec 5, 2024

CryptoNinja0331 commented Dec 9, 2024

aifirstd3v commented Dec 9, 2024 • edited Loading

candle-admin commented Dec 11, 2024

stevenlei commented Dec 13, 2024

avijit-shihaan commented Dec 14, 2024

hamidradical commented Dec 18, 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 Nov 5, 2024 •

edited

Loading

fabioMacieira16 commented Nov 20, 2024 •

edited

Loading

aifirstd3v commented Dec 9, 2024 •

edited

Loading