Error loading es module in typescript project

[mdellanave]

Hi,
I'm trying to use vr in a stenciljs web component.

I tried loading the vr using the es module in the dist folder but I got an error

Stencil use typescript and maybe the error it's due to the way the vr es module is built

Here an example to reproduce the problem

https://codesandbox.io/p/devbox/videojs-with-stenciljs-ryvq8c

some idea to solve?

[Jamesits]

Works on Node 22.19.0, Typescript 5.9.2, Vite npm:rolldown-vite@^7.1.4, Vue 3.5.19, videojs-vr 2.0.0

import videoJs from 'video.js'
import VR from 'videojs-vr'
import CardboardButton from 'videojs-vr/src/cardboard-button'
import BigVrPlayButton from 'videojs-vr/src/big-vr-play-button'

onMounted(() => {
  // see https://github.com/surmon-china/videojs-player/blob/0d368bf272a8f67042ad849230b94f1740530e6d/packages/vue/src/component.ts#L33 for how to create the player instance
  const playerRes = createPlayer({
    element: videoElement.value!,
    props: rawProps,
    onEvent: emit,
  })

  // enable videojs-vr on a created instance of videojs
  Object.setPrototypeOf(BigVrPlayButton.prototype, Object.create(videoJs.getComponent('BigPlayButton').prototype))
  videoJs.registerComponent('BigVrPlayButton', BigVrPlayButton)
  Object.setPrototypeOf(CardboardButton.prototype, Object.create(videoJs.getComponent('Button').prototype))
  videoJs.registerComponent('CardboardButton', CardboardButton)
  const _vr = new VR(playerRes.player, {/* options */})
})