shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
74.42k stars 4.6k forks source link

[bug]: Next.js 15 Stable : Cannot Install Any Library #5597

Closed Grenish closed 2 weeks ago

Grenish commented 2 weeks ago

Describe the bug

After installing next.js 15 stable with turbopack I'm getting errors while installing any libraries even shadcn/ui

npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
√ Which style would you like to use? » New York
√ Which color would you like to use as the base color? » Neutral
√ Would you like to use CSS variables for theming? ... no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating app\globals.css
⠸ Installing dependencies.
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 tailwindcss-animate class-variance-authority lucide-react @radix-ui/react-icons clsx tailwind-merge
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: gagan-porfolio@0.1.0
npm ERR! Found: react@19.0.0-rc-69d4b800-20241021
npm ERR! node_modules/react
npm ERR!   react@"19.0.0-rc-69d4b800-20241021" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.x || ^17.x || ^18.x" from @radix-ui/react-icons@1.3.0
npm ERR! node_modules/@radix-ui/react-icons
npm ERR!   @radix-ui/react-icons@"*" 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! C:\Users\Grenish\AppData\Local\npm-cache\_logs\2024-10-27T14_00_01_841Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\Grenish\AppData\Local\npm-cache\_logs\2024-10-27T14_00_01_841Z-debug-0.log

Also at first I thought it might be because of turbopack so I redo it again with opting no for turbopack but the issue still persists.

Affected component/components

Everything

How to reproduce

  1. npx create-next-app@latest .
  2. Install any dependencies npx shadcn@latest init or npm install next-themes lucid-react

Codesandbox/StackBlitz link

https://github.com/Grenish/porfolio

Logs

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 tailwindcss-animate class-variance-authority lucide-react @radix-ui/react-icons clsx tailwind-merge
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: gagan-porfolio@0.1.0
npm ERR! Found: react@19.0.0-rc-69d4b800-20241021
npm ERR! node_modules/react
npm ERR!   react@"19.0.0-rc-69d4b800-20241021" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.x || ^17.x || ^18.x" from @radix-ui/react-icons@1.3.0
npm ERR! node_modules/@radix-ui/react-icons
npm ERR!   @radix-ui/react-icons@"*" 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! C:\Users\Grenish\AppData\Local\npm-cache\_logs\2024-10-27T14_00_01_841Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\Grenish\AppData\Local\npm-cache\_logs\2024-10-27T14_00_01_841Z-debug-0.log

System Info

Device name LAPTOP-1671HG5P
Processor   12th Gen Intel(R) Core(TM) i5-12450H   2.00 GHz
Installed RAM   8.00 GB (7.68 GB usable)
Device ID   FE68204F-xxxx-xxxx-xxxx-xxxxxxxxxxxx
Product ID  00356-xxxxx-xxxxx-xxxxx
System type 64-bit operating system, x64-based processor
Pen and touch   No pen or touch input is available for this display

Before submitting

VincentBarkman commented 2 weeks ago

Yeah, same issue but downgrading to react 18 seems to have solved it. However that is just a bandage:

npm install react@18 react-dom@18
tutorialsmaterials commented 2 weeks ago

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

VincentBarkman commented 2 weeks ago

@tutorialsmaterials don't advertise your blog like that, especially when the solution adds more problems and a layer of complexity.

shadcn commented 2 weeks ago

I'm working on a fix. Let's use https://github.com/shadcn-ui/ui/issues/5557 to track since they are related.

Grenish commented 2 weeks ago

@VincentBarkman Yeah after downgrading to react 18, it's working fine.

Grenish commented 2 weeks ago

@shadcn Best of luck with that. Also now when we install shadcn we get an extra option to use --force or --legacy-peer-deps but for now downgrading to react 18 seems to be a viable option for now. Hope it get's resolve in the future for react 19 RC and 19 stable.