[bug]: npx shadcn@latest add toast creating hooks folder outside components

[ronijaat]

Describe the bug

PS C:\Users\HP\Desktop\office\package-maker> npx shadcn@latest add toast
Need to install the following packages:
[email protected]
Ok to proceed? (y) y

✔ Checking registry.
✔ Installing dependencies.
✔ Created 3 files:

• components\ui\toast.tsx
• hooks\use-toast.ts
• components\ui\toaster.tsx

---

Failed to compile

Next.js (14.2.5) out of date (learn more)
./components/ui/toaster.tsx:3:1
Module not found: Can't resolve '@/components/hooks/use-toast'
1 | "use client"
2 |

3 | import { useToast } from "@/components/hooks/use-toast"
| ^
4 | import {
5 | Toast,
6 | ToastClose,

https://nextjs.org/docs/messages/module-not-found

Affected component/components

Toast

How to reproduce

1. npx shadcn@latest add toast

Codesandbox/StackBlitz link

yes

Logs

no

System Info

windows 11

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[jmfp]

Same problem on mac

[mellolauro]

Problem win 11 . node -v -- > v20.17.0
npm -v --> 10.8.2

npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.

Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.

request to https://ui.shadcn.com/r/styles/index.json failed, reason: self-signed certificate in certificate chain

[bretzke]

I have the same problem.

[ericjy]

Solution

This solution works for me. Modify the newly added components/ui/toaster.tsx file:

Change

import { useToast } from "@/components/hooks/use-toast";

to

import { useToast } from "@/hooks/use-toast";

This is because the use-toast.tsx is added to the hooks dir, not components/hooks dir.

Or you can move the use-toast.tsx to components/hooks dir, which might be a better organization depending on your project setup.

[suprunchuk]

THE PROBLEM IS SOLVED!!!

I have exactly the same problem.

Replace the current line:

import { toast } from "@/components/hooks/use-toast";

On this line:

import { toast } from "@/hooks/use-toast";

[mschilde]

The issue is not fixed, but can be handled manually quickly.

[malo-dev]

"Replace the line import { toast } from "@/components/hooks/use-toast" with import { toast } from "@/components/hooks/use-toast".