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
75.68k stars 4.75k forks source link

[bug]: Problem While Installing SHADCN on NextJS 15 #4047

Open SH20RAJ opened 5 months ago

SH20RAJ commented 5 months ago

Describe the bug

Problem While Installing SHADCN on NextJS 15

Affected component/components

Installation

How to reproduce

  1. Install NextJS with v 15
  2. Try to install shadcn

Codesandbox/StackBlitz link

https://github.com/SH20RAJ/article

Logs

shaswatraj@Sh article % npx shadcn-ui init       
Need to install the following packages:
shadcn-ui@0.8.0
Ok to proceed? (y) y

✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Would you like to use CSS variables for colors? … no / yes

✔ Writing components.json...
✔ Initializing project...
⠦ Installing dependencies...Command failed with exit code 1: npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: article@0.1.0
npm error Found: react@19.0.0-rc-f994737d14-20240522
npm error node_modules/react
npm error   react@"19.0.0-rc-f994737d14-20240522" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^16.5.1 || ^17.0.0 || ^18.0.0" from lucide-react@0.395.0
npm error node_modules/lucide-react
npm error   lucide-react@"*" 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 /Users/shaswatraj/.npm/_logs/2024-06-20T01_13_53_671Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/shaswatraj/.npm/_logs/2024-06-20T01_13_53_671Z-debug-0.log
shaswatraj@Sh article %

System Info

Mac,Chrome

Before submitting

Gamez0 commented 5 months ago

as the error says lucide-react peer dependency mismatch with react 19 downgrading to 18 could be a solution or use --force --legacy-peer-deps flags to npm install

Gamez0 commented 5 months ago

lucide-react now supports "react":^19.0.0 but not rc(release candidate) https://github.com/lucide-icons/lucide/issues/2134#event-13293674013

abpbackup commented 4 months ago

For now, this is the solution it's working for me. This is just one more pain I've got for using next 15@rc npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react@0.400.0 --legacy-peer-deps

tutorialsmaterials commented 1 month ago

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