Closed joeylin closed 1 week ago
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,
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 theapp
folder (move theglobals.css
file to the realapp
folder before deleting) that has been created when running theshadcn-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
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.
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
- It occurs when we use src folder for next app creation.
- It occurs when correct path to global.css is not mentioned during init shadcn process
- Correct path is /src/app/global.css but
- 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,
@ateebasif Thanks for this solution. This one worked for me
i create next js 13 app with pnpm pnpm create next-app@latest
and still got the same error after init shadcnUI
404 Error After Installing Shadcn ui
- It occurs when we use src folder for next app creation.
- It occurs when correct path to global.css is not mentioned during init shadcn process
- Correct path is /src/app/global.css but
- 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
Yes it worked amazing.
@joeylin If you are using the
src
folder you need to delete theapp
folder (move theglobals.css
file to the realapp
folder before deleting) that has been created when running theshadcn-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",
thanks it's worked for me
+1 solved. @ateebasif Thanks for https://github.com/shadcn-ui/ui/issues/755#issuecomment-1685303139 solution. This one worked for me
@joeylin If you are using the
src
folder you need to delete theapp
folder (move theglobals.css
file to the realapp
folder before deleting) that has been created when running theshadcn-ui init
command. Then you need to update thecomponents.json
file by changing this line:- "css": "app/globals.css", + "css": "src/app/globals.css",
this solved my issue
Thanks man
I found video demostration of this issue on youtube and worked for me (y) here is the link https://youtu.be/o_D-tdcpyzQ?si=upN60yRpAeMeaIiT
Note: video is in different language (not English)
"src/app/globals.css",
ah looking for this thanks man.
Thank u! I have solved my issue
wouldn't it be better to auto detect whether the repo uses a src folder or not? what scenario is there for having the next app folder in the root directory as well as a src folder?
This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.
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.