compile error with svelte-kit

[conanchen]

1. copied Player.svelte code from the wetsite

2. run yarn svelte-kit build

3. got below exception

Run npm run preview to preview your production build locally.

Using @sveltejs/adapter-static
file:///Users/xxx/.svelte-kit/output/server/chunks/VPlayer-0635b075.js:2
import { VmAudio, VmFile, VmCaptionControl, VmControl, VmIcon, VmTooltip, VmCaptions, VmClickToPlay, VmControlGroup, VmControlSpacer, VmControls, VmCurrentTime, VmTime, VmDailymotion, VmEmbed, VmDash, VmVideo, VmDblClickFullscreen, VmDefaultControls, VmEndTime, VmFullscreenControl, VmLiveIndicator, VmMuteControl, VmPipControl, VmPlaybackControl, VmScrim, VmScrubberControl, VmSlider, VmSettingsControl, VmTimeProgress, VmVolumeControl, VmDefaultSettings, VmMenu, VmMenuItem, VmMenuRadio, VmMenuRadioGroup, VmSettings, VmSubmenu, VmDefaultUi, VmLoadingScreen, VmPoster, VmSpinner, VmUi, VmHls, VmIconLibrary, VmPlayer, VmSkeleton, VmVimeo, VmYoutube } from "@vime/core";
^^^^^^^
SyntaxError: Named export 'VmAudio' not found. The requested module '@vime/core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@vime/core';
const { VmAudio, VmFile, VmCaptionControl, VmControl, VmIcon, VmTooltip, VmCaptions, VmClickToPlay, VmControlGroup, VmControlSpacer, VmControls, VmCurrentTime, VmTime, VmDailymotion, VmEmbed, VmDash, VmVideo, VmDblClickFullscreen, VmDefaultControls, VmEndTime, VmFullscreenControl, VmLiveIndicator, VmMuteControl, VmPipControl, VmPlaybackControl, VmScrim, VmScrubberControl, VmSlider, VmSettingsControl, VmTimeProgress, VmVolumeControl, VmDefaultSettings, VmMenu, VmMenuItem, VmMenuRadio, VmMenuRadioGroup, VmSettings, VmSubmenu, VmDefaultUi, VmLoadingScreen, VmPoster, VmSpinner, VmUi, VmHls, VmIconLibrary, VmPlayer, VmSkeleton, VmVimeo, VmYoutube } = pkg;

at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async Object.load_component (file:///Users/xxx/.svelte-kit/output/server/chunks/app-a43e4421.js:455:13)
at async Promise.all (index 1)
at async respond$1 (file:///Users/xxx/node_modules/@sveltejs/kit/dist/ssr.js:1211:11)
at async render_page (file:///Users/xxx/node_modules/@sveltejs/kit/dist/ssr.js:1454:19)
at async resolve (file:///Users/xxx/node_modules/@sveltejs/kit/dist/ssr.js:1717:10)
at async Object.handle (file:///Users/xxx/.svelte-kit/output/server/chunks/app-a43e4421.js:286:20)

500 /my
Error: 500 /my
at file:///Users/xxx/node_modules/@sveltejs/kit/dist/chunks/index4.js:86:11
at visit (file:///Users/xxx/node_modules/@sveltejs/kit/dist/chunks/index4.js:222:5)
at async prerender (file:///Users/xxx/node_modules/@sveltejs/kit/dist/chunks/index4.js:303:6)
at async Object.prerender (file:///Users/xxx/node_modules/@sveltejs/kit/dist/chunks/index4.js:368:4)
at async adapt (file:///Users/xxx/node_modules/@sveltejs/adapter-static/index.js:13:4)
at async adapt (file:///Users/xxx/node_modules/@sveltejs/kit/dist/chunks/index4.js:393:2)
at async file:///Users/xxx/node_modules/@sveltejs/kit/dist/cli.js:896:5
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: failed to run yarn svelte-kit build with sh -c

Caused by:
command failed

[Albermonte]

Same here, any solution?

It's working fine on development but this error shows only while building the project

[ZaDarkSide]

Okay after debugging I came up with this solution:

Create a file named Player.svelte

<script>
  import * as pkg from '@vime/core'

  const { defineCustomElements, VmPlayer, VmVideo, VmDefaultUi } = pkg

  defineCustomElements()
</script>

<vm-player autoplay muted>
  <vm-video poster="/media/poster.png" cross-origin>
    <source data-src="/media/video.mp4" type="video/mp4" />
    <track default kind="subtitles" src="/media/subs/en.vtt" srclang="en" label="English" />
  </vm-video>
  <vm-default-ui />
</vm-player>

[Albermonte]

@mihar-22 any comment on this?

[Robak08]

Jumped into discussion way to late but mine solution from a month ago was sapper like ssr import. Definetly not as elegant, but needed to make it work fast after switching from routify v2 to sveltekit.

<script>
import { onMount } from 'svelte';
let showPlayer = false;
let player;

onMount(async () => {
  const { defineCustomElements } = await import('@vime/core');
  defineCustomElements();
  showPlayer = true;
});
</script>
{#if showPlayer}
  <vm-player bind:this={player}>
    <vm-video>
         <source data-src="xxx" type="video/mp4" />
    </vm-video>
    <vm-ui>
         <vm-default-controls />
    </vm-ui>
  </vm-player>
{/if}

[jnaklaas]

None of the suggested solutions worked for me. It doesn't throw any errors, but it doesn't load the video either.