[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

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?

palmithor · 2025-01-02T11:38:41Z

I have a problem related to this. I'm using bun, bun workspaces & react 19. When I do
bunx --bun shadcn@latest init -c ./apps/frontend it prompts me due to legacy peer deps (I actually don't have any).

? How would you like to proceed? › - Use arrow-keys. Return to submit.
❯   Use --force
    Use --legacy-peer-deps

However, this fails because it tries to run npm i instead of bun i

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 --force tailwindcss-animate class-variance-authority lucide-react clsx tailwind-merge
npm warn using --force Recommended protections disabled.
npm error code EUNSUPPORTEDPROTOCOL
npm error Unsupported URL Type "workspace:": workspace:*

Andrew-Chen-Wang · 2025-01-06T00:11:12Z

What is actually required for ShadCN to support React 19? I'll start a list:

Danfraga33 · 2025-01-09T00:31:48Z

Problem with calendar still persists.

Any solutions ?

Michael-Liendo · 2025-01-10T16:07:41Z

Same here!

souvik-basak · 2025-01-12T15:15:54Z

I think one thing that can be done is to use --legacy-peer-deps

try to run in the command prompt
npm install shadcn --legacy-peer-deps

I am unsure about this command, please let me know if it works.

arashmad · 2025-01-27T10:37:30Z

Maybe it helps some of you, if you have similar issue in running pipeline using command npm ci.
Recently I tried to establish CI using action actions/setup-node@v4 with the following configuration:

name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: 22
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
    - uses: actions/upload-artifact@v4
      if: ${{ !cancelled() }}
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

and got pipeline failed as follow:

...
Run npm ci
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
npm error   peer react@">=16.8.0" from @floating-ui/[email protected]
npm error   node_modules/@floating-ui/react-dom
npm error     @floating-ui/react-dom@"^2.0.0" from @radix-ui/[email protected]
npm error     node_modules/@radix-ui/react-popper
npm error       @radix-ui/react-popper@"1.2.1" from @radix-ui/[email protected].[4](https://github.com/arashmad/web-map-application/actions/runs/12986620663/job/36213824091#step:4:5)
npm error       node_modules/@radix-ui/react-popover
npm error         @radix-ui/react-popover@"^1.1.4" from the root project
npm error   33 more (@radix-ui/react-arrow, @radix-ui/react-compose-refs, ...)
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from [email protected]
npm error node_modules/cmdk
npm error   cmdk@"^1.0.0" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/react
npm error   peer react@"^18.0.0" from [email protected]
npm error   node_modules/cmdk
npm error     cmdk@"^1.0.0" 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.
npm error
npm error
npm error For a full report see:
npm error /home/runner/.npm/_logs/202[5](https://github.com/arashmad/web-map-application/actions/runs/12986620663/job/36213824091#step:4:6)-01-27T10_11_15_387Z-eresolve-report.txt
npm error A complete log of this run can be found in: /home/runner/.npm/_logs/2025-01-2[7](https://github.com/arashmad/web-map-application/actions/runs/12986620663/job/36213824091#step:4:8)T10_11_15_387Z-debug-0.log
Error: Process completed with exit code 1.
...

Searching a bit on google, I came across this post.
Then on my local project, I removed the package-lock.json file and also node_modules directory and then executed npm i again to fix the issue in version mismatch as npm ci is sensitive and breaks pipeline.

Here is the package.json file:

{
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:e2e": "playwright test"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-dialog": "^1.1.4",
    "@radix-ui/react-label": "^2.1.1",
    "@radix-ui/react-popover": "^1.1.4",
    "@radix-ui/react-slot": "^1.1.1",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
    "lucide-react": "^0.473.0",
    "next": "15.1.6",
    "ol": "^10.3.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-hook-form": "^7.54.2",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.24.1",
    "zustand": "^5.0.3"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@playwright/test": "^1.50.0",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.2.0",
    "@types/jest": "^29.5.14",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.1.6",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "ts-node": "^10.9.2",
    "typescript": "^5"
  }
}

Michael-Liendo · 2025-01-27T21:25:23Z

It happened to me when I wanted to use the Date Picker component, I don't remember well, but what I remember is that I installed date-fns using npm install date-fns, and that gave me an error, I fixed it by doing this: uninstalling it, and then running npx shadcn@latest add calendar and that installed the correct version of date-fns.

nephix · 2025-02-05T15:45:26Z

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>' does not satisfy the constraint 'keyof IntrinsicElements | ForwardRefExoticComponent | (new (props: any) => Component<any, {}, any>) | ((props: any) => ReactNode)'.
Type 'ForwardRefExoticComponent<AccordionItemProps & RefAttributes>' is not assignable to type 'ForwardRefExoticComponent'.
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>' is not a valid JSX element type.
Type 'ForwardRefExoticComponent<ButtonProps & RefAttributes>' 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>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<unknown, string | JSXElementConstructor>' 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

I'm still running into this issue w/ bun

bun v1.2.3-canary.29
react@^18.3.1
@types/[email protected]

Type 'ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>' does not satisfy the constraint 'keyof IntrinsicElements | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any, deprecatedLegacyContext?: any) => ReactNode)'.
  Type 'ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>' is not assignable to type 'ForwardRefExoticComponent<any>'.
    Type 'React.ReactNode' is not assignable to type 'import(".../node_modules/@types/react/index").ReactNode'.
      Type 'bigint' is not assignable to type 'ReactNode'.

and when using <FormControl>:

Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & RefAttributes<never>'.

kurorinto · 2025-02-17T17:36:09Z

Is this bug resolved now? I am so cold, because my boss asked me to blow cold air until it can be solved

aca1490 · 2025-02-20T23:29:49Z

@kurorinto Solution for me was:

npm install [email protected] [email protected]

L3on06 · 2025-03-06T11:16:01Z

Hi,

I had this issue after upgrading to React 19 and Tailwind CSS v4. However, I believe it will also work with just React 19.

I encountered some other problems, but for the calendar specifically,
the solution is to reinstall it by running:

`npx shadcn@latest add calendar`

Then, press 'Y' when prompted to overwrite.

Hope this will help :)

shadcn · 2025-03-06T11:20:37Z

Yes. This is fixed in the latest release. Please give it a try and let me know.

L3on06 · 2025-03-06T13:08:13Z

Yes. This is fixed in the latest release. Please give it a try and let me know.

Hi ShadCN, hope you're doing well.

I tried updating the calendar again, and while it did fix the issue, it didn’t work as expected.

The problem occurs when running:

npx shadcn@latest add calendar

it downgrades react-day-picker to version ^8.10.1. As a result, when I deploy the project to Vercel in my case

I'm encountering an error because the date-fns and react-day-picker versions aren't compatible.

I've fixed the issue in my code. If you're open to it, I can create a pull request with my updates, and you can review and merge it.

Thanks for your time!

Best regards,
Leon

shadcn · 2025-03-06T13:15:54Z

@L3on06 oh sorry. I was replying to the original post about init failing. The calendar work is still in progress. Once Tailwind v4 support is out, I'll wrap up the calendar upgrade and push.

pareshjinger · 2025-03-07T08:35:09Z

How much time it gonna take?

@L3on06 oh sorry. I was replying to the original post about init failing. The calendar work is still in progress. Once Tailwind v4 support is out, I'll wrap up the calendar upgrade and push.

Anurag-Mishra22 · 2025-03-14T17:35:13Z

@shadcn
any update on calendar work , still getting the error
The problem occurs when running:

npx shadcn@latest add calendar

it downgrades react-day-picker to version ^8.10.1. As a result, when I deploy the project to Vercel in my case

I'm encountering an error because the date-fns and react-day-picker versions aren't compatible.

mean while I have fixed using ->

"overrides": {
  "react-day-picker": {
    "react": "^19.0.0",
    "date-fns": "^4.1.0"
  }
}

in package.json file

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

shadcn self-assigned this Oct 28, 2024

Svendolin mentioned this issue Dec 27, 2024

Installation fails with Next.js 15 and shadcn-ui to add a button for my searchbar Svendolin/Modelcar-search-application-FINAL-VERSION#2

Closed

krsiakdaniel mentioned this issue Jan 28, 2025

INVESTIGATE: 🕵️ flowbite move to chakra-ui or shadcn-ui? krsiakdaniel/portfolio-website-krsiak-cz#412

Closed

6 tasks

shadcn unpinned this issue Feb 6, 2025

[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

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

palmithor commented Jan 2, 2025 • edited Loading

Andrew-Chen-Wang commented Jan 6, 2025

Danfraga33 commented Jan 9, 2025

Michael-Liendo commented Jan 10, 2025

souvik-basak commented Jan 12, 2025

arashmad commented Jan 27, 2025 • edited Loading

Michael-Liendo commented Jan 27, 2025

nephix commented Feb 5, 2025 • edited Loading

Setup:

Errors:

kurorinto commented Feb 17, 2025

aca1490 commented Feb 20, 2025

L3on06 commented Mar 6, 2025

npx shadcn@latest add calendar

shadcn commented Mar 6, 2025

L3on06 commented Mar 6, 2025

shadcn commented Mar 6, 2025

pareshjinger commented Mar 7, 2025

Anurag-Mishra22 commented Mar 14, 2025 • edited Loading

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

aifirstd3v commented Dec 9, 2024 •

edited

Loading

palmithor commented Jan 2, 2025 •

edited

Loading

arashmad commented Jan 27, 2025 •

edited

Loading

nephix commented Feb 5, 2025 •

edited

Loading

`npx shadcn@latest add calendar`

Anurag-Mishra22 commented Mar 14, 2025 •

edited

Loading