SvelteKit: doesn't work on mount?

[dsm-72]

I am having difficulty to get this to work on sveltekit. If I use hot reloading I can wrangle it to work, but loading the page doesnt...

[sharu725]

Hey @dsm-72 can you explain the issue. Try the latest version and check if this exists.

[AlanAcDz]

Can confirm there's an issue using the component in a Sveltekit app. Using client-side navigation works fine, but reloading throws an error, maybe it's an issue with SSR.

Here's the error that gets thrown:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for .../node_modules/svelte-youtube-embed/Youtube.svelte
at new NodeError (node:internal/errors:393:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
at defaultLoad (node:internal/modules/esm/load:81:20)
at nextLoad (node:internal/modules/esm/loader:163:28)
at ESMLoader.load (node:internal/modules/esm/loader:605:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
at new ModuleJob (node:internal/modules/esm/module_job:63:26)
at #createModuleJob (node:internal/modules/esm/loader:480:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34)

You can get it working in Sveltekit if you dynamically import the component on mount like this:

<script lang="ts">
    import { SvelteComponent, onMount } from 'svelte'
    let YouTube: typeof SvelteComponent

    onMount(async () => {
        YouTube = (await import('svelte-youtube-embed')).default
    })
</script>

<svelte:component this={YouTube} id="q2Y3f0lHnMs" />

[sharu725]

@AlanAcDz you were right. I have pushed a new version to fix it. Can you try updating the package to 0.1.7 and try.

[AlanAcDz]

It works fine now. Thanks!

[sharu725]

Closing as fixed.