I can't get npx shadcn@latest init to work with my already-existing next.js app

[fivestones]

I have a next.js app, and I'm trying to add shadcn. I cd into my-app, and then do npx shadcn@latest init. It says

✔ Preflight checks.
✖ Verifying framework.

We could not detect a supported framework at /Users/david/development/family-organizer.
Visit https://ui.shadcn.com/docs/installation/manual to manually configure your project.
Once configured, you can use the cli to add components.

I can't really find anything about this particular error online. If I do the same `npx shadcn@latest init' in an empty folder, it creaes a next.js app as expected, with shadcn all set up. But it won't work with my already existing next.js app.

I tried the manual setup, and did it all as far as I can see, but then when I tried to do npx shadcn add Button, I get basically the same error:

npx shadcn add Button
✔ You need to create a component.json file to add components. Proceed? … yes

We could not detect a supported framework at /Users/david/development/family-organizer.
Visit https://ui.shadcn.com/docs/installation/manual to manually configure your project.
Once configured, you can use the cli to add components.

My next.js app uses the new directory structure, with no src folder, and a single app folder, inside of which are page.tsx and layout.tsx.

What am I doing wrong? Thanks!

[sromku]

Seems there is a bug in the latest release (0.9.0, commit, stackoverflow). You can fallback to a previous version till it's fixed. This works for me:

npx shadcn-ui@0.8.0 init

[Emmily001]

Thanks man. this saves me from a lot of stress

[DarkReunion]

感谢感谢

[Wuzoobia]

This works for me after a day and a half of head scratching. Thanks

[mmsparkle]

very thanks！！！！this problem has confused me for two days.thanks!

[ChloeWeever]

天才

[joseph0926]

Your latest “nextjs” project (https://github.com/fivestones/family-organizer) does not have a “next.config” file

This is what the latest version of “shadcn” detects when detecting frameworks
(“https://github.com/shadcn-ui/ui/blob/078dfe66072c4ca780bbc99d4ad4b13b1f44fe7e/packages/shadcn/src/utils/get-project-info.ts#L71C1-L77C4”)

[myrddral]

for me, this was it. cheers!

[astuteprogrammer]

i was able to install shadcn with this fix, but project wouldn't build and it didn't like next.config.ts / js / mjs file. tried all combination. I will try using the previous version of shadcn. :(

[joseph0926]

i was able to install shadcn with this fix, but project wouldn't build and it didn't like next.config.ts / js / mjs file. tried all combination. I will try using the previous version of shadcn. :(

Sorry I couldn't be of much help :(
I think the “shadcn” team updated the “cli” this time, and the framework check criteria is “next.config” (based on next.js),,,,

[roopalvegad]

for me too. This helped

[weilun0510]

it is solved?

[Grenish]

Nope it got worse in next.js 15 stable

[devnull69]

No, it doesn't seem to be solved yet

What I wanted to add: After following the Manual installation procedure for shadcn, in the end it mentions that you can now install components

This is what I had to do at that point:

1. Init an earlier version of shadcn-ui using npx shadcn-ui@0.8.0 init
2. Install the component(s) from this earlier version npx shadcn-ui@0.8.0 add button

Both commands gave me errors like

npm ERR! code EIO
npm ERR! syscall write
npm ERR! errno -5
npm ERR! EIO: i/o error, write

npm ERR! A complete log of this run can be found in: /home/.npm/_logs/2024-09-16T12_20_16_513Z-debug-0.log
jsh: spawn npx EIO

but in the end it worked nevertheless.

[KalpanaRanjan]

Thank you

[zachary-wang12]

In 0.8 or earlier version, I could use cli to init the shadcn-ui even using webpack. But these days, it will always fail not only because of the unsupported framework, but also the internet connection...

[ukalpa]

I encountered the same issue, then I found it's because lack of next.config.ts in the project folder, after adding a default one like below, the command is executed successfully. So I reckon you need to assure the tailwind.config.ts and next.config.ts files existing for validation.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  reactStrictMode: true,
};

export default nextConfig;