Mux Video fails to Load When using Media-Chrome in Localhost SvelteKit Evn

[jelias]

Reproduce:

1. Set up SvelteKit file, run dev locally.
2. Refresh page and click play

Expected behavior: Plays normally

Actual behavior: Player sits empty, network tab shows a cancelled request to fetch the video source.

Notes: I've tried the same code in a code pen and it works fine! Even tried it in the Svelte Repl! All good.

I've also tested the mux-video web component on its own and that works completely fine as well. Seems to be something within media-chrome that is causing the bug... Could it be the way it is being mounted with the slot?

Just seems to be an issue locally? Which makes it very hard to develop and trust that things are working... Is it possible that I'm being rate limited? What's weird is it works fine on Hot Reload (file save) but not when I refresh the browser.

Svelte Repl: https://svelte.dev/repl/0cfcb095cdf643868026c818e64bb6b5?version=4.2.8 CodePen: https://codepen.io/jelias/pen/PoLGLRx?editors=1000

Current workaround: Use the src attribute with mux-video

Same code, running locally:

<script lang="ts">
    import type { PageData } from './$types';
    // import 'media-chrome';
    // import '@mux/mux-video';

    // export const prerender = true;

    // export let data: PageData;
</script>

<svelte:head>
    <script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@1/+esm"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mux/mux-video@0"></script>
</svelte:head>

<main>
    hello world
    <media-controller>
        <mux-video
            slot="media"
            preload="auto"
            playback-id="ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2s"
            metadata-video-id="video-id-12345"
            metadata-video-title="Mad Max: Fury Road Trailer"
            metadata-viewer-user-id="user-id-6789"
            stream-type="on-demand"
            muted
        >
            <track
                label="thumbnails"
                default
                kind="metadata"
                src="https://image.mux.com/ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2s/storyboard.vtt"
            />
        </mux-video>
        <media-control-bar>
            <media-play-button></media-play-button>
            <media-mute-button></media-mute-button>
            <media-volume-range></media-volume-range>
            <media-time-range></media-time-range>
            <media-pip-button></media-pip-button>
            <media-fullscreen-button></media-fullscreen-button>
        </media-control-bar>
    </media-controller>
</main>

<style>
    media-controller {
        width: 100%;
    }
</style>

[luwes]

thanks for reporting. which version of Sveltekit are you running?

does it make any difference how you import mux-video?

see our example here https://github.com/muxinc/elements/blob/main/examples/svelte-kit/src/routes/mux-video/%2Bpage.svelte https://elements-demo-svelte-kit.vercel.app/mux-video

[jelias]

Upon further testing I think it was due to an import issue on my monorepo

But for reference: "svelte": "^4.2.3",