Drawer not animating the entry when using on Remix Run

[chaitanyapilaka]

Hi, I tried using Vaul with a newly created remix app. The code I used is straight from the read me.

  function MyComponent() {
    return (
      <Drawer.Root>
        <Drawer.Trigger>Open</Drawer.Trigger>
        <Drawer.Portal>
          <Drawer.Content>
            <p>Content</p>
          </Drawer.Content>
          <Drawer.Overlay />
        </Drawer.Portal>
      </Drawer.Root>
    );
  }

Unfortunately, the entry animation doesn't work but the slide down works as expected with an exit animation. Is there something I need to do with remix to make it work?

[emilkowalski]

Can you provide a codesandox with reproduction?

[akamfoad]

I have the same problem, it was working correctly when I was using Vite on it's own, but when migrated to Remix SPA it the entry functionality broke.

Here is a codesandbox And here is the repo

[akamfoad]

After doing some research, looks like the vaul stylesheet is not included in the stylesheets, I imported the stylesheet and now it works fine

Importing as stylesheet handled by Remix:

import "vaul/dist/index.css";

Importing as URL and rendering the link yourself:

// import
import vaulStyles from "vaul/dist/index.css?url";

// render in root 
<link href={vaulStyles} rel="stylesheet" />

[the-dream-machine]

Thanks @akamfoad. Was able to get it working by importing the styles in the root:

// app/root.tsx

import VaulStyles from "vaul/dist/index.css";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: VaulStyles }
  // ...other stylesheets
];

[ParkerMJones]

It looks like vaul/dist/index.css no longer exists in v0.9.1. I've got it working again by copying the contents of vaul/dist/index.css from v0.9.0, saving it in my own vaul.css and referencing that file in the same way @the-dream-machine is above. Allows me to upgrade to 0.9.1 but retain this solution.

[akamfoad]

Indeed @ParkerMJones looks like it's no longer there, it would be great to report this in a new issue so it gets more attention, not sure this is intentional as there is no mention in the release notes.

[akamfoad]

@ParkerMJones I went ahead and opened #357 to make sure this gets the attention it needs