search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
72.17k stars 4.35k forks source link

[bug]: Dialog acting like Drawer on first render (conflicts with Sheet export) #4247

Open merlinstardust opened 3 months ago

merlinstardust commented 3 months ago

Describe the bug

I copied the code from the shadcn site for Dialog and used it in my app. But when I click the trigger, a drawer opens instead. If I update the modal dialog code, the drawer then turns into a regular Dialog. If I refresh the screen, the updates disappear and it's a drawer again.

https://github.com/shadcn-ui/ui/assets/421960/1bae5e79-46de-424c-b867-e3184be9f9ca

Affected component/components

Dialog

How to reproduce

  1. Add Dialog code
  2. Add Sheet code
  3. Add Dialog to a page
  4. Click trigger but it opens drawer instead
  5. Edit Dialog code, which turns the drawer into a Dialog again.

GitHub Repo

https://github.com/merlinstardust/example-shadcn-dialog-issue

Codesandbox/StackBlitz link

https://codesandbox.io/p/github/merlinstardust/example-shadcn-dialog-issue/

Logs

No response

System Info

Mac 2018 - Sonoma 14.5
Chrome - Version 126.0.6478.127
NextJS - 15.0.0-rc.0
React - 19.0.0-rc-3563387fe3-20240621

Before submitting

merlinstardust commented 3 months ago

I've created a minimal recreation and added it to Code Sandbox. The issue is somehow caused by my use of an index file to export all my shadcn components from. If I remove export {default as Sheet} from './Sheet'; from atoms/index.ts or if I import Dialog directly with import Dialog from ~/atoms/Dialog, things work as expected.