SvelteKit generates warning when running dev

[rhscjohn-dev]

I get a vite warning every time I run SvelteKit - dev. It seems not to introduce operational errors in Vime but I only starting to use the player. The basic HTML example seems to be working fine.

Console output.

> Executing task: npm run dev <
> sveltek-vime@0.0.1 dev
> svelte-kit dev

  SvelteKit v1.0.0-next.301
  network: not exposed
  local:   http://localhost:3000
  Use --host to expose server to other devices on this network

3:48:15 PM [vite] warning:
D:/Users/johni/Projects/sveltek-vime/node_modules/.vite/@vime_core.js
1810|      return module[exportName];
1811|    }
1812|    return import(
   |                  ^
1813|      /* webpackInclude: /\.entry\.js$/ */
1814|      /* webpackExclude: /\.system\.entry\.js$/ */
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis
  File: D:/Users/johni/Projects/sveltek-vime/node_modules/.vite/@vime_core.js?v=dfc194f8    

package.json

{
  "name": "sveltek-vime",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "package": "svelte-kit package",
    "preview": "svelte-kit preview",
    "prepare": "svelte-kit sync"
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "next",
    "@sveltejs/kit": "next",
    "@vime/core": "^5.3.1",
    "@vime/svelte": "^5.3.1",
    "svelte": "^3.44.0"
  },
  "type": "module"
}

html.svelte

<script>
  import "@vime/core/themes/default.css";
  import { VmPlayer, VmVideo, VmFile, defineCustomElements } from "@vime/core";
  import { onMount } from "svelte";

  //  check if the custom elements have already been registered
  if (!customElements.get("vm-player")) {
    customElements.define("vm-player", VmPlayer);
  }
  if (!customElements.get("vm-video")) {
    customElements.define("vm-video", VmVideo);
  }
  if (!customElements.get("vm-file")) {
    customElements.define("vm-file", VmFile);
  }

  let player = null;
  const onLoadStart = () => {
    console.log("vmLoadStart:");
  };
  const onReady = () => {
    console.log(`vmReady:`);
    player.mediaTitle = "I do not know HTML";
  };
  const onPlaybackReady = () => {
    console.log(
      `vmPlaybackReady: ready: ${player.ready} currentProvider: ${player.currentProvider} currentSrc: ${player.currentSrc} mediaTitle: ${player.mediaTitle} mediaType: ${player.mediaType} viewType: ${player.viewType} isLive: ${player.isLive} isMobile: ${player.isMobile}`
    );
  };
  const onPlaybackStarted = () => {
    console.log(
      `vmPlaybackStarted: currentTime: ${player.currentTime} duration: ${player.duration} volume: ${player.volume}`
    );
  };
  const onPauseChange = (event) => {
    console.log(
      `vmPausedChanged: ${event.detail} currentTime: ${player.currentTime} duration: ${player.duration}`
    );
  };
  const onPlaybackEnded = () => {
    console.log(
      `vmPlaybackEnded:  currentTime: ${player.currentTime} duration: ${player.duration}`
    );
  };
  const onVmError = (error) => {
    console.error(`vmError: ${JSON.stringify(error)}`);
  };
  onMount((player) => {
    // const player = document.querySelector("vm-player");
    console.log("onMount - player: ", player);
  });
</script>

<svelte:head>
  <title>HTML Player</title>
</svelte:head>

<div class="container">
  <vm-player
    controls
    bind:this={player}
    on:vmReady={onReady}
    on:vmLoadStart={onLoadStart}
    on:vmPlaybackReady={onPlaybackReady}
    on:vmPlaybackStarted={onPlaybackStarted}
    on:vmPausedChange={onPauseChange}
    on:vmPlaybackEnded={onPlaybackEnded}
    on:vmError={onVmError}
  >
    <!-- Provider component is placed here. -->
    <vm-video cross-origin="true" poster="https://media.vimejs.com/poster.png">
      <source data-src="https://media.vimejs.com/720p.mp4" type="video/mp4" />
      <track
        default
        kind="subtitles"
        src="https://media.vimejs.com/subs/english.vtt"
        srclang="en"
        label="English"
      />
      <track
        kind="subtitles"
        src="https://media.vimejs.com/subs/spanish.vtt"
        srclang="es"
        label="Spanish"
      />
    </vm-video>
    <!-- <vm-default-ui> -->
    <!-- We can place our own UI components here to extend the default UI. -->
    <!-- </vm-default-ui> -->
    <vm-ui>
      <vm-click-to-play />
      <vm-captions />
      <vm-poster />
      <vm-spinner />
      <vm-default-settings />
      <vm-controls pin="bottomLeft" active-duration="2750" full-width>
        <!-- 
        These are all predefined controls that you can easily customize. You could also build 
        your own controls completely from scratch.
      -->
        <vm-playback-control tooltip-direction="right" />
        <vm-volume-control />
        <vm-time-progress />
        <vm-control-spacer />
        <vm-caption-control />
        <vm-pip-control keys="p" />
        <vm-settings-control />
        <vm-fullscreen-control keys="f" tooltip-direction="left" />
      </vm-controls>
    </vm-ui>
  </vm-player>
</div>

<style>
  .container {
    margin: 1rem auto;
    /* display: flex; */
    /* align-items: center;
    justify-content: center; */
    height: 100vh;
    width: 100vw;
  }
</style>

[a-tonchev]

I also get this error message using the player - I use @vime/react:

The above dynamic import cannot be analyzed by vite.

[rhscjohn-dev]

The problem seems to be in Stencil.js. Any package that uses Stencil.js to build their web components is going to have this problem. I have my doubts that Stencil will fix this problem. It seems everybody is going to Lit for web component builds. The author of this package is going to have to rewrite his web components in something other than Stencil. For myself, I went with video.js for my video player.