Search code examples
astrojsshadcnui

Getting ERROR using Astro and Shadcn UI Drawer component

So I have been testing components using Astro and Shadcn UI. I'm now testing the Drawer component from Shadcn. But even though there are no errors in the code. I'm getting an error whenever I run it using npm run dev command. This is happening in the index.astro file.

The ERROR I get is:

'DialogTrigger' must be used within 'Dialog'

The code is below:

---
import '@/styles/globals.css'
import { Icon } from 'astro-icon/components';
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { Button } from '@/components/ui/button';

---

<html lang="en">
    <head>
        <title>Astro</title>
    </head>
    <body>
        <Icon name="Logo" />
        <Button>Hello World</Button>
        <Drawer>
            <DrawerTrigger>Open</DrawerTrigger>
            <DrawerContent>
              <DrawerHeader>
                <DrawerTitle>Are you absolutely sure?</DrawerTitle>
                <DrawerDescription>This action cannot be undone.</DrawerDescription>
              </DrawerHeader>
              <DrawerFooter>
                <Button>Submit</Button>
                <DrawerClose>
                  <Button variant="outline">Cancel</Button>
                </DrawerClose>
              </DrawerFooter>
            </DrawerContent>
          </Drawer>
          
    </body>
</html>

Note that I have tested some other components from shadcn like the Button component in the code and they all are working. I am not sure what the problem is regarding the Drawer component so any guidance or assistance will be appreciated.

Solution

  • The Problem

    So the problem had to do with Client Directives which control how UI Framework components (In this case Shadcn components which are required to hydrate for interaction) are hydrated to index.astro. By default, it is not hydrated in the client so to fix it we have to load the client.

    Fix

    There is a common issue on GitHub that helped me fix this. I had to create a custom drawer as a component in a separate .tsx file, then imported it into the index.astro file and loaded the client. As a result I got it working: Working Drawer

    Code

    mydrawer.tsx file

    import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

const MyDrawer = () => {
  return (
    <Drawer>
      <DrawerTrigger>Open</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
          <DrawerDescription>This action cannot be undone.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <Button>Submit</Button>
          <DrawerClose>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
};

export default MyDrawer;

    index.astro file

    ---
import '@/styles/globals.css'
import MyDrawer from '@/components/mine/mydrawer'
---

<html lang="en">
    <body>
        <MyDrawer client:load/> 
    </body>
</html>