Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[bug]: Toast not displaying #5230

Open
2 tasks done
Evsio0n opened this issue Oct 7, 2024 · 1 comment
Open
2 tasks done

[bug]: Toast not displaying #5230

Evsio0n opened this issue Oct 7, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@Evsio0n
Copy link

Evsio0n commented Oct 7, 2024

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

Screen.Recording.2024-10-08.at.2.59.10.AM.mov

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

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
@Evsio0n Evsio0n added the bug Something isn't working label Oct 7, 2024
@prajnaprabhu3
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Evsio0n @prajnaprabhu3