Vidstack not working with remix

[aplr]

I'm working on a Remix project right now, and wanted to include the vidstack player. Tried vime before, which gave me hydration warnings as stencil is injecting styles into the head before hydration. This is why I wanted to move to vidstack, however I'm stuck at SSR already.

1. I get an exception on the following line (see here) as import.meta.url is not available in Remix.

const ssrFile = path.resolve(path.dirname(fileURLToPath(import.meta.url)), './exec-ssr.js');

I replaced import.meta.url by another approach to get the file url to see if I can get it working. Do you think there's another approach of handling the SSR case, as it might take some time for Remix to support import.meta.url?

2. After replacing import.meta.url locally, I hit another issue, as you're shimming the window object here, which breaks environment detection in Remix.

Do you think this is an issue in Remix and their check of typeof document !== "undefined" should be replaced by something more specific, or do you plan to change something with the shims?

I really like the Idea behind this player, and I'm looking forward to see this working in my projects.

[mihar-22]

Hey @aplr!

Thanks for the detailed issue. I completely understand, all of these stupid work arounds are because of Web Components - more specifically Lit. I'm working on tooling (Maverick) which I'll be using to rebuild Vidstack Player before the 1.0 release which will smooth out all framework integrations and SSR. I'll be removing the shims, they're only needed at the moment for Lit.

The only thing you can probably do right now is avoid SSR and dynamically import your player component.

[aplr]

Thanks @mihar-22, I'll use plyr then until vidstack is ready to use with SSR. Really excited having a player which feels "native" and supports tailwind for styling.

[mihar-22]

Closing this now since we've released new packages that can SSR, if issue persists we can open a new ticket :)