[bug]: Toast not displaying

Evsio0n commented 1 month ago

Describe the bug

The Toaster component is not displaying on the screen when triggered. Despite following the setup instructions and ensuring the component is correctly imported and used, the toast notifications do not appear.

Affected component/components

Toast

How to reproduce

https://github.com/user-attachments/assets/3df8c6e3-c4c8-4e4b-b810-c17344f31eaf

Bug description:

The Toaster component, part of the shadcn/ui library, is not rendering on the page as expected. This issue persists despite using the recommended setup and usage patterns.

Set up a Next.js project and import the Toaster component from shadcn/ui. Add the Toaster component to a page and trigger it via a user action (e.g., clicking a button). Observe that no toast notification appears on the screen.


import { Button } from "@/components/ui/button";
import Head from "next/head";
import {toast} from "@/components/hooks/use-toast";
import { ToastAction } from "@/components/ui/toast";

const TestPage = () => {
    return (
    <>
        <Head>  
            <title>Test Page</title>
            <meta name="description" content="This is a test page" />
        </Head>

        <main className="flex flex-col items-center justify-center h-screen">
            <h1 className="text-6xl font-bold">Test Page</h1>
            <Button
      variant="outline"
      onClick={() => {
        toast({
          title: "Scheduled: Catch up ",
          description: "Friday, February 10, 2023 at 5:57 PM",
          action: (
            <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
          ),
        })
      }}
    >
      Add to calendar
    </Button>
        </main>
    </>
    )
    }
export default TestPage;

layout.tsx

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { Open_Sans } from 'next/font/google';

import { Toaster } from "@/components/ui/toaster";
interface RootLayoutProps {
    children: React.ReactNode;
}

// export default async function RootLayout({
//   children,
// }: Readonly<{
//   children: React.ReactNode;
// }>) {
export default  function RootLayout({ children }: RootLayoutProps) {
  return (

    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} ${geistOpenSans.variable}  ${geistGilroy.variable} antialiased`}
      >
        {children}
        <Toaster/>
      </body>
    </html>

  );
}

Codesandbox/StackBlitz link

No response

Logs

No errors output.

System Info

macOS 15.0.1 (24A348)

React Version 18.3.1
Next.js Version 14.2.14

Before submitting

[X] I've made research efforts and searched the documentation
[X] I've searched for existing issues

prajnaprabhu3 commented 1 month ago

have you made TestPage a client component? that's the only issue i can see here @Evsio0n

BerryTheDeveloper commented 1 month ago

@Evsio0n What resolutions are you testing it on? If you go below 640px, it might not appear because of the default class names added to Toast's Viewport element. I had to remove 'sm' class before 'right-0' class to show the toast on the mobile phones. Besides that, I don't see anything in your code that could break the toast...

shadcn-ui / ui