Search code examples
sveltesvelte-3sveltekitvimejs

Sveltejs/SvelteKit with Vimejs showing an error

I was trying to add a video player inside a svelte project. so I choose VimeJS but how much I try, it's giving an error. I am using SvelteKit beta and VimeJs v5 . I am not sure if it's an official bug of VimeJS or not. if the fix is not possible please suggest me a good media player for Svelte

2725|          return module[exportName];
2726|      }
2727|      return import(
   |                    ^
2728|      /* webpackInclude: /\.entry\.js$/ */
2729|      /* 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

package.json

{
    "name": "s8vime",
    "version": "0.0.1",
    "scripts": {
        "dev": "svelte-kit dev",
        "build": "svelte-kit build",
        "package": "svelte-kit package",
        "preview": "svelte-kit preview",
        "check": "svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
        "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
    },
    "devDependencies": {
        "@sveltejs/adapter-auto": "next",
        "@sveltejs/kit": "next",
        "@typescript-eslint/eslint-plugin": "^4.31.1",
        "@typescript-eslint/parser": "^4.31.1",
        "autoprefixer": "^10.4.2",
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-svelte3": "^3.2.1",
        "postcss": "^8.4.5",
        "prettier": "^2.4.1",
        "prettier-plugin-svelte": "^2.4.0",
        "svelte": "^3.44.0",
        "svelte-check": "^2.2.6",
        "svelte-preprocess": "^4.10.1",
        "tailwindcss": "^3.0.15",
        "tslib": "^2.3.1",
        "typescript": "^4.4.3"
    },
    "type": "module",
    "dependencies": {
        "@vime/core": "^5.3.1",
        "@vime/svelte": "^5.3.1",
        "webpack": "^5.66.0"
    }
}

Player.svelte

<Player
  theme="dark"
  style="--vm-player-theme: #e86c8b;"
>
  <Video     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" 
    />
  </Video>
  
  <DefaultUi />
</Player>

<script>
import { Player, Video, DefaultUi } from '@vime/svelte';
</script>
Solution

  • This is a official bug of Stencil,I Hope it will be fixed soon https://github.com/ionic-team/stencil/issues/3157