ui

ui copied to clipboard

I create new application with next.js and shadcn, when I installed next.js, the server worked, and I can see the page in the browser. but, after I run "npx shadcn-ui@latest init", the page always redirects to error page.

I am having the same issues, installed shadcn just now.

I cannot reproduce this. Can you output the list of files here? Try tree --gitignore

Try creating a next js app, observe that pages are accessible, then run npx shadcn-ui@latest init, after setting up all pages redirect to 404

Okay. What is the command you used to create the Next.js project? And use the default options?

The command I ran is npx create-next-app@latest when I created the next app. Then npm run dev to run the app. I have been developing a next js 13.4 app for the past few weeks. I haven't committed my changes for today, installed shadcn then all pages suddenly redirect to 404 page.

Can you check the import alias in tsconfig and components.json if they match?

The CLI init isn't supposed to alter your code in the /app directory, except when creating global css

@joeylin @EugenePeter Duplicate of #746

It happened for me because it created a new app folder with globals.css. However my app folder was inside the src folder.

It happened for me because it created a new app folder with globals.css. However my app folder was inside the src folder.

Thanks man! It was such a silly mistake that I didn't find it. Thanks for the help.

It happened for me because it created a new app folder with globals.css. However my app folder was inside the src folder.

Thanks man! It was such a silly mistake that I didn't find it. Thanks for the help.

then how to fix it ? move the app folder to project folder ?

I don't know why, I just follow the tips step by step, but it seems the default action does not work.

@joeylin If you are using the src folder you need to delete the app folder (move the globals.css file to the real app folder before deleting) that has been created when running the shadcn-ui init command.

Then you need to update the components.json file by changing this line:

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

It happened for me because it created a new app folder with globals.css. However my app folder was inside the src folder.

thats it, thanks

In my case,

• "css": "app/globals.css",

• "css": "src/app/globals.css", This method was not helpful. I restarted the project without using the src directory. now done

ok, i fixed it using below config:

"css": "src/app/globals.css"

and delete /app/* folder thanks everyone.

@joeylin If you are using the src folder you need to delete the app folder (move the globals.css file to the real app folder before deleting) that has been created when running the shadcn-ui init command.

Then you need to update the components.json file by changing this line:

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

this solved my issue

+1 this solves the issue

404 Error After Installing Shadcn ui

1. It occurs when we use src folder for next app creation.
2. It occurs when correct path to global.css is not mentioned during init shadcn process
3. Correct path is /src/app/global.css but
4. Default path is app/global.css it creates another app directory in root folder, while we are using app directory is src folder, and then 404 error occurs What you need to do is i) copy content from /app/global.css to /src/app/global.css ii) delete app directory in root folder

you can avoid this issue just setting the proper path of your global.css when you start using shadcn:

exactly.. it is not a bug.... it is a mistake at user(developer)'s end. Team behind shadcn can takecare of it, by searching path to global.css and not asking the user

Wow 🚀 I love you of all! You saved me 👍 I had followed this instruction. But I think it would be better if there was an explanation to make sure the app folder exists in the src folder.

When you run npx shadcn-ui@latest init

Where is your global CSS file? Please answer as below.

src/app/globals.css

---

✌️

default path is src/app/globals.css if we select yes for following Would you like to use src/ directory with this project? › No / Yes while creating next application

shadcn should use the defaults that Next.js uses, with the src folder. Otherwise debugging what happens is a waste of time.

+1 solved

I'm getting the same/similar issue, but I'm using /pages, not /app. My components.json file points to src/styles/global.css, which is correct. It's all fine locally until I deploy to a live URL (via Amplify, which isn't my choice). Has anyone experienced this?

404 Error After Installing Shadcn ui

1. It occurs when we use src folder for next app creation.
2. It occurs when correct path to global.css is not mentioned during init shadcn process
3. Correct path is /src/app/global.css but
4. Default path is app/global.css it creates another app directory in root folder, while we are using app directory is src folder, and then 404 error occurs What you need to do is i) copy content from /app/global.css to /src/app/global.css ii) delete app directory in root folder

thanks man this, worked like a charm form me. As i was using src folder with nextjs so when i installed shadcn it created another app folder for me and it had only globals.css files. so what i did was,

• updated the globals.css location with src/ inside the components.json
• so it will be like this -> "css": "src/app/globals.css",
• deleted the app folder outside the src folder
• deleted the current .next folder and re run the server and it worked for me

@ateebasif Thanks for this solution. This one worked for me