Exports error when using svelte-kit

[tw1t611]

When importing the package into a svelte-kit project, an error is thrown telling the export is undefined This a known issure with vite (the bundler of svelte-kit) atm, when using cjs modules. https://github.com/sveltejs/kit/blob/master/documentation/faq/70-packages.md

The described workaround does not work for this package. Could you consider using a new bundler that exports es modules? Maybe just using vite would be a good option, since svelte is using it in future too.

[tw1t611]

I just created a repo to make the bundler work. Did not test any functionality though. Feel free to use it. ;)

https://github.com/tw1t611/svelte-youtube-vite

EDIT: Sadly, I was not able to import the package from github, so bundling is still somehow messed up. For now I will use the component locally. Hope you do have more luck than me.

[tw1t611]

For everyone who needs a youtube player in the meantime. You can simply implement it yourself:

<script>
  import { onMount } from "svelte";
  import YoutubePlayer from "youtube-player";

  export let videoId;
  $: player && player.loadVideoById(videoId);

  let player;
  let options = {
    playerVars: {
      autoplay: 1,
    },
  };

  onMount(() => {
    player = YoutubePlayer(player, options);
    player.loadVideoById(videoId);
    player.playVideo();
  });
</script>

<div id="youtube-player" class="w-full h-full" bind:this={player} />

[hoonblizz]

@tw1t611 Such a simple and amazing answer. I tried various methods but this works the best. Thanks! :)