Shadcn Toast not showing using useEffect

Hello. I am trying to render a shadcn toast after a redirect from a server action, but first, I need to be able to render a toast on page load.
export default function Page() {
const { toast } = useToast();
useEffect(() => {
console.log("hello");
toast({
title: "Test",
description: "Test",
});
}, [toast]);
export default function Page() {
const { toast } = useToast();
useEffect(() => {
console.log("hello");
toast({
title: "Test",
description: "Test",
});
}, [toast]);
I can't figure out why this does not work... anyone here that has used this library might help? Thanks in advance!
7 Replies
Y7YA
Y7YA9mo ago
Did you add the <Toaster/> component in layout?
AmazingViegas
AmazingViegas9mo ago
Yes! It works when I render a toast on button click just not on useEffect
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
{children}
<Toaster />
</body>
</html>
);
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
{children}
<Toaster />
</body>
</html>
);
}
And the same happens in Sonner toasts btw
Y7YA
Y7YA9mo ago
And the page is a client component?
AmazingViegas
AmazingViegas9mo ago
Yes, I think it really is a Sonner bug
AmazingViegas
AmazingViegas9mo ago
I made this stackblitz that perfectly demonstrates my problem: https://stackblitz.com/edit/stackblitz-starters-hzwlsc?file=app%2Flayout.tsx
Luís Viegas
StackBlitz
Next.js Starter - StackBlitz
The React framework for production
Y7YA
Y7YA9mo ago
Weird but this hack fixes it:
setTimeout(() => {
toast('hello');
})
setTimeout(() => {
toast('hello');
})
Let me know if you find a real fix
AmazingViegas
AmazingViegas9mo ago
Thank you for the tip! I openned an issue in the lib's github. Will let you know when something happens.
Want results from more Discord servers?
Add your server