[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

• [X] I've made research efforts and searched the documentation
• [X] 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".

[nikrishttam]

The problem is still not resolved by default.

[wpenistone]

still not fixed