[bug]: npm error

[Debanjannnn]

Describe the bug

After NEXT JS 15 shadcn is having issues in installation, devs please look into this issue

Affected component/components

its having error in installation

How to reproduce

1.Install Next.js: npx create-next-app@latest
2.Navigate to the Project Directory
3.Initialize ShadCN: npx shadcn@latest init -d
4.Encounter Dependency Conflict:
Error appears due to React version mismatch:
ERESOLVE unable to resolve dependency tree
react@"^16.x || ^17.x || ^18.x" from @radix-ui/react-icons

Codesandbox/StackBlitz link

https://ui.shadcn.com/docs/installation/next

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 error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   react@"19.0.0-rc-69d4b800-20241021" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^16.x || ^17.x || ^18.x" from @radix-ui/[email protected]
npm error node_modules/@radix-ui/react-icons
npm error   @radix-ui/react-icons@"*" 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:

System Info

./app/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css
Error: Cannot find module 'tailwindcss-animate'
Require stack:
- C:\Users\Debanjan Mondal\Desktop\event-ticket\tailwind.config.ts
Import trace for requested module:
./app/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css
./app/globals.css

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[onurhan1337]

That error is not the reason for shadcn/ui. It's coming from the radix-ui/icons package. Someone tried to fix it but not merged yet. I'm waiting too.

radix-ui/icons#184

[Gitstar-OC]

I am having the same error, is there a way I can resolve it by using a previous version or something ?

[hlcxpl]

me too

[brannonwinn]

I just followed the manual install instructions on shadcn https://ui.shadcn.com/docs/installation/manual and instead of npm install @radix-ui/react-icons I used npm install react-icons and it seemed to work. However, you will then need to continue the manual process and add the lib/utils.ts file as well. Otherwise it worked.

[onehundred]

@brannonwinn, worked for me as well, thanks!

[Jorge-Chibante]

I tried chosing the Default style instead of New York and it worked. If the style is not relevant I guess you can work around it.

[shadcn]

I'm working on a fix. Let's use #5557 to track since they are related.