TypeError: Cannot read properties of undefined (reading 'orientation') when deploy on deno

[thai2706]

Current Behavior:

I tried to use Vidstack player in my Nuxt.js project, it's work well on local machine but when I deploy to deno, I got this:

The deployment failed: UNCAUGHT_EXCEPTION

TypeError: Cannot read properties of undefined (reading 'orientation')
    at canRotateScreen (file:///src/server/index.ts:135354:37)
    at canOrientScreen (file:///src/server/index.ts:135351:10)
    at file:///src/server/index.ts:135832:20

and when I deploy to Vercel, it stuck at home page.

Steps To Reproduce:

1. I followed installation step at: Vidstack
2. Import player & CSS (I tried import 'vidstack/bundle'; but it doesn't work):

import 'vidstack/player';
import 'vidstack/player/layouts/default';
import 'vidstack/player/ui';
import 'vidstack/player/styles/default/theme.css';
import 'vidstack/player/styles/default/layouts/video.css';

3. Add player

<media-player title="Sprite Fight" src="https://stream.mux.com/VZtzUzGRv02OhRnZCxcNg49OilvolTqdnFLEqBsTwaxU/low.mp4">
  <media-provider></media-provider>
  <media-video-layout thumbnails="https://image.mux.com/VZtzUzGRv02OhRnZCxcNg49OilvolTqdnFLEqBsTwaxU/storyboard.vtt"></media-video-layout>
</media-player>

Environment:

• Framework: Vue.js
• Meta Framework: Nuxt.js
• Node: 20.11.1
• OS: Windows 10 64-bit
• Browser: [email protected]

[mihar-22]

Deno wasn't included in our package exports so it was picking up the client bundle.

[mihar-22]

I tried import 'vidstack/bundle'; but it doesn't work

This is very likely due to the include filter not matching your player component file path. You can either remove it or move the file to the correct path (default is in a player/ directory).

import { vite as vidstack } from 'vidstack/plugins';

export default defineNuxtConfig({
  vite: {
    plugins: [
      // Include filter to only check specific files for components and styles.
      vidstack({ include: /player\// }),
    ],
  },
});