Help Needed: Toast Notification Not Working in Astro with use-toast and Toaster

Ermias Teklemarkos — Tue, 06 Aug 2024 13:34:38 +0000

Hi everyone,

I'm currently working on an Astro project and attempting to implement toast notifications using use-toast and Toaster. Despite following the documentation and various troubleshooting steps, I'm unable to get the toast notifications to work. I would greatly appreciate any insights or suggestions from the community.

Project Setup

1. layout.astro

---
import NavBar from "@/components/navbar";
import { Toaster } from "@/components/ui/toaster";
---
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <NavBar />
    <slot /> <!-- your content is injected here -->
    <Toaster />
  </body>
</html>

2. index.astro

---
import { ToastDemo } from "@/components/ToastDemo";
import Layout from "../layouts/Layout.astro";
---

<Layout>
  <main class="flex justify-center">
    <ToastDemo client:idle />
  </main>
</Layout>

3. ToastDemo.tsx

"use client"

import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/use-toast";

export function ToastDemo() {
  const { toast } = useToast();

  return (
    <Button
      variant="outline"
      onClick={() => {
        console.log("ToastDemo");
        toast({
          description: "Your message has been sent.",
        });
      }}
    >
      Show Toast
    </Button>
  );
}

Tailwind CSS Configuration

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

Issues Faced

Toast Not Displaying: The ToastDemo component logs "ToastDemo" in the console, indicating that the click event is triggered, but the toast notification does not appear.
No Errors in Console: There are no error messages or warnings in the browser console.

Steps Taken

Verified that all necessary dependencies are installed and up to date.
Checked import paths and ensured they are correct.
Confirmed Tailwind CSS is configured and working properly.
Ensured that <Toaster /> is included in the layout component.
Tried both client:idle and client:load directives for the ToastDemo component.

Request

Has anyone experienced similar issues or can point out what might be going wrong? Any help or suggestions would be highly appreciated!