404 This page could not be found, on Any Route in NextJS

[yhoungdev]

My Application was working fine. but after initializing ShadCN with pnpm dlx shadcn-ui@latest init inito my next, i can no longer get any route again.

I started getting 404 page

[shadcn]

Can you share your components.json file please? A dir structure (overview) of your Next.js project would help as well.

[stefandim91]

I had the same problem. Somehow there were two app folders. One on the root level and one in src. In both of them, there was global.css. Maybe I did something wrong when initializing the project. I moved the global.css from the outer to the inner app folder, deleted the outer and the problem was solved.

[timconnorz]

I had the same problem. Somehow there were two app folders. One on the root level and one in src. In both of them, there was global.css. Maybe I did something wrong when initializing the project. I moved the global.css from the outer to the inner app folder, deleted the outer and the problem was solved.

I ran into this same issue. thanks for sharing your fix!

[yhoungdev]

I had the same problem. Somehow there were two app folders. One on the root level and one in src. In both of them, there was global.css. Maybe I did something wrong when initializing the project. I moved the global.css from the outer to the inner app folder, deleted the outer and the problem was solved.

No you didn't do anything wrong.

This was the reason why you might be facing that.

• You create a new nextJs application
• And after that you wanna init shadCN UI With pnpm dlx shadcn-ui@latest init this process makes it look like it is initialising another project.

Because sometimes it can create a tailwind.config.js and tailwind.config.ts

[devdumpling]

This happened to me too. For reference, I have a src folder that houses app and am thinking maybe the shadcn CLI didn't account for it... but only for the globals weirdly?

[yhoungdev]

This happened to me too. For reference, I have a src folder that houses app and am thinking maybe the shadcn CLI didn't account for it... but only for the globals weirdly?

by Default when setting NextJs, it asks if you want to use SRC dir / if yes then it will create an SRC folder that is gonna house the App folder

[shadcn]

@devdumpling the cli should handle src dir. Any chance you can post an overview of your project structure so that I can take a look?

[yhoungdev]

@devdumpling the cli should handle src dir. Any chance you can post an overview of your project structure so that I can take a look?

YEa @devdumpling you should post an overview

[ex3ndr]

I just hit the same problem: it didn't detect an existing src folder during setup and i didn't change path to css so it created a new folder.

[yhoungdev]

How where you able to resolve it.

And @shadcn has this issue been resolved?🙏

[ex3ndr]

I have merged generated file to the right place and updated components.json

[nicolaerusan]

where do things go specifically here? I've also hit this issue.

@shadcn it happens on the path of the installation instructions - if you're using pnpm and follow instructions directly and just hit enter through everything you get this issue:

https://ui.shadcn.com/docs/installation/next

[yhoungdev]

Awesome

[shadcn]

@nicolaerusan Thanks for the updates. I'll mark this as a bug and look into it.

[nicolaerusan]

Let me know if there's anything I can do to help debug & thanks @shadcn!

Any workaround suggestions for installing?

I tried to move the files around to the appropriate spots but the tailwind based styling was still broken so must not have adjusted all the pieces needed

[luanfvieira]

The problem happens because globals.css is being created in the root of the project.

Delete the app folder in the root and restart the development server and it will work.

[Obsidian-AI]

I noticed that during my original installation that I had the same issue, and then was easily able to fix once i was moved globals.css

[hou-man]

Not intuitive but if your globals.css is at src/app/globals.css you should include the src when answering the following prompt or a duplicate app directory and globals.css is created.

[lem0n4id]

Not intuitive but if your globals.css is at src/app/globals.css you should include the src when answering the following prompt or a duplicate app directory and globals.css is created.

This works! Maybe updating the cli default to src/app/globals.css will fix this issue!

[yhoungdev]

Has this issue been fixed on the Cli ?

If yes the issue can be closed or moved to discussion

[lem0n4id]

Has this issue been fixed on the Cli ?

If yes the issue can be closed or moved to discussion

Not yet. I am in process of submitting a PR fixing this

[yhoungdev]

This issue has already been fixed

[yhoungdev]

The team did a really great work 🤩