[bug]: Using npx shadcn@latest init

[tomvanvegchel]

Describe the bug

Node version: v20.5.1

I've tried running npx shadcn@latest init aswell as pnpm dlx shadcn@latest init both not going past the "this can take several minutes" message as a fresh project. The longest I've waited is 20 minutes.

I figured I would install a clean next.js project and run it in there to see if maybe the init is stuck on something and not returning it. This resulted in the following error, perhaps related?

I am unable to install shadcn ui using the init command in any shape or form. Using it with vite is no problem, that works great.

Affected component/components

x

How to reproduce

1. Init a new project using: npx shadcn@latest init.
2. 1. Init a new next.js project using: npx create-next-app@latest
3. 2. Init npx shadcn@latest init within the new next.js project

Codesandbox/StackBlitz link

Can't reproduce a command

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: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"19.0.0-rc-65a56d0e-20241020" 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/[email protected]
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! /Users/tomvanvegchel/.npm/_logs/2024-10-22T18_01_23_627Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/tomvanvegchel/.npm/_logs/2024-10-22T18_01_23_627Z-debug-0.log

System Info

MacBook M3 Pro
MacOs: Sonoma 14.4
Node version: v20.5.1

Before submitting

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

[chhofi]

I can confirm having the exact same issue. Running npx shadcn@latest init in a fresh, empty folder and stuck with the message:

npx shadcn@latest init --src-dir button ✔ The path /Users/username/Downloads/testwebsite does not contain a package.json file. Would you like to start a new Next.js project? … yes ✔ What is your project named? … test website ⠋ Creating a new Next.js project. This may take a few minutes.

MacBook M2 Max
MacOs: 15.1
Node version: v22.10.0

[ayuugoyal]

I got the same issue i think it was because of my cluttered node_modules folder so i just remove the folder and install fresh dependencies and then it works fine for me.

Ubuntu 22
node v22

[chhofi]

I got the same issue i think it was because of my cluttered node_modules folder so i just remove the folder and install fresh dependencies and then it works fine for me.

Ubuntu 22 node v22

Unfortunately was not a working solution for me. Also tried brew uninstall node and rm -r /opt/homebrew/lib/node_modules. But the issue persists

[chhofi]

All right so I investigated a bit further.

as already seen in your screenshot it comes down to the @radix-ui/[email protected] being not compatible with the newest React 19.0.0 version.

So that is what I did to get it working:

Create a new next.js project without installing the dependencies
npx create-next-app appname --no-install

after you are done cd into the created folder.

There open the file called: package.json
and change the react version: "react": "18.3.1",
"react-dom": "18.3.1",

after that run:

npm install

and than

npx shadcn init

that did the trick for me. And I guess we have to wait till the mentioned package is compatible with the version 19 of React

[RafaelFerreiraTVD]

Thanks for the fast investigation, I was running into the same error.

[reynaldichernando]

Another way of fixing this is by running npm install with legacy peer deps npm i --legacy-peer-deps

#5515 (comment)

[shadcn]

I've temporarily pinned create-next-app. Keeping an eye on radix-ui/icons#184

[Israel-Okito]

i found this article, it solves my problem https://www.okitdev.com/posts/comment-resoudre-les-conflits-de-versions-react-avec-radix-ui-react-icons

[NiloyChowdhuryVR]

I have found a temporary solution, just install the next js,
then in package.json, change the dependency of react and react dom :
"react": "18.3.1", "react-dom": "18.3.1",

then install the shadcn, it will work.
and just wait until radix is compatible with the new react19

[shadcn]

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