[bug]: shadcn-ui installation fails with Next.js 15

TaifurIslamAshraf commented 2 days ago

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:

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

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

Gitstar-OC commented 2 days ago

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

Gitstar-OC commented 2 days ago

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

Gitstar-OC commented 2 days ago

Do you need a temporary solution for this ?

needim commented 2 days ago

you can use overrides for a temporary fix.

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

[!WARNING]
This is just a temporary fix!

dx1ded commented 2 days ago

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

Gitstar-OC commented 2 days ago

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 commented 2 days ago

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

shadcn-ui / ui