Compile error after running shadcn-ui init command

[chongweiguan]

There seems to be an issue with the shadcn-ui init command.

When creating a new project using npx create-next-app@latest my-app --typescript --tailwind --eslint, and then running npm run dev. No issues so far, the page displayed is shown below.

Next, I ran npx shadcn-ui@latest init and chose the default settings, shown below

However, after running npm run dev again, an error is shown

I really enjoy using shadcn and I hope this can be fixed soon! This seems to be a similar issue faced by #745. Do let me know if you need me to provide other information for you

[dan5py]

@chongweiguan Are you using the src folder?

[chongweiguan]

Hi! if you are asking if the src folder is my working directory when running npm run dev then yes I am

[dan5py]

Then you must say it in this prompt (init):

- Where is your global CSS file? › app/globals.css
+ Where is your global CSS file? › src/app/globals.css

Otherwise a new app folder is created, causing the not found error.

[dan5py]

If you already have the components.json file you can just edit the tailwind.css property in it and delete the wrong app folder.

- "css": "app/globals.css",
+ "css": "src/app/globals.css",

[chongweiguan]

Oh ok it is working now! Thank you very much for the help!

[macgeargear]

can i see your components.json @chongweiguan

[chongweiguan]

@macgeargear

[EugenePeter]

The you must say it this prompt (init):

- Where is your global CSS file? › app/globals.css
+ Where is your global CSS file? › src/app/globals.css

Otherwise a new app folder is created, causing the not found error.

I have the same issue however my project is a pre existing project with lots of code in the app folder. How to resolve it without deleting app folder?

[dan5py]

@EugenePeter You don't have to delete the original app folder, just the one that the CLI created.

[dan5py]

Then you have to edit the path of the css in the components.json file:

- "css": "app/globals.css",
+ "css": "src/app/globals.css",

(Assuming that you're using the src folder)

[EugenePeter]

It's working as expected now . Cheers @dan5py

[samadaman]

Still Not Working...& Showing 404 on browser.

[schmanat]

Still Not Working...& Showing 404 on browser.

After updating the components.json file the error still exists. My solution was that I have to the delete the app/globals.css folder. In my project structure exists the globals.css twice.

app/globals.css
src/app/globals.css

After deleting the app/globals.css the app works as expected again.