Could not load content (LottiePlayer.svelte) // Error

[Scorpio3310]

I encountered an error while loading the Lottie player. The problem occurs when the Lottie animation is loaded on the page, and there are also warnings during the app's building process. Interestingly, despite these errors and warnings, the Lottie player loads normally and works as expected.

Code in browser in sources: LottiePlayer.svelte Could not load content for http://localhost:5173/sl/LottiePlayer.svelte (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

My code:

<script>
    import { onMount } from 'svelte';

    export let src;
    export let width;

    let LottiePlayer;
    let dataReady = false;

    onMount(async () => {
        const module = await import('@lottiefiles/svelte-lottie-player');
        LottiePlayer = module.LottiePlayer;
        dataReady = true;
    });
</script>

{#if LottiePlayer && dataReady}
    <div style="max-width: {width}px;" class="mx-auto">
        <svelte:component
            this={LottiePlayer}
            {src}
            autoplay={true}
            loop={true}
            controls={false}
            renderer="svg"
            background="transparent"
            height={0}
            width={0}
            controlsLayout={false}
        />
    </div>
{:else}
    <div class="flex flex-col gap-6">
        <div class="animate-pulse">
            <div class="w-30 h-60 bg-gray-100 rounded-xl max-w-sm mx-auto"></div>
        </div>
    </div>
{/if}

Terminal warnings/errors:

Error: Not found: /sl/LottiePlayer.svelte
    at resolve (/Users/nik/Sites/quantifly-game/node_modules/.pnpm/@sveltejs+kit@1.24.1_svelte@4.2.0_vite@4.4.9/node_modules/@sveltejs/kit/src/runtime/server/respond.js:483:13)
    at resolve (/Users/nik/Sites/quantifly-game/node_modules/.pnpm/@sveltejs+kit@1.24.1_svelte@4.2.0_vite@4.4.9/node_modules/@sveltejs/kit/src/runtime/server/respond.js:285:5)
    at Object.handle (/Users/nik/Sites/quantifly-game/src/hooks.server.js:43:9)
    at Module.respond (/Users/nik/Sites/quantifly-game/node_modules/.pnpm/@sveltejs+kit@1.24.1_svelte@4.2.0_vite@4.4.9/node_modules/@sveltejs/kit/src/runtime/server/respond.js:282:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///Users/nik/Sites/quantifly-game/node_modules/.pnpm/@sveltejs+kit@1.24.1_svelte@4.2.0_vite@4.4.9/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:505:22

Building warnings:

vite v4.4.9 building for production...
transforming (114) node_modules/.pnpm/uuid@9.0.0/node_modules/uuid/dist/esm-browser/index.js11:34:51 PM [vite-plugin-svelte] /Users/nik/Sites/quantifly-game/node_modules/.pnpm/@lottiefiles+svelte-lottie-player@0.3.0/node_modules/@lottiefiles/svelte-lottie-player/src/components/Controls.svelte:231:6 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
229:   {#each layout as item}
230:     {#if item === 'playpause'}
231:       <div class="btn" on:click="{togglePlay}" class:active="{isPlaying || isPaused}">
           ^
232:         {#if isPlaying}
233:           <svg {...ICON_SIZE}>
11:34:51 PM [vite-plugin-svelte] /Users/nik/Sites/quantifly-game/node_modules/.pnpm/@lottiefiles+svelte-lottie-player@0.3.0/node_modules/@lottiefiles/svelte-lottie-player/src/components/Controls.svelte:231:6 A11y: <div> with click handler must have an ARIA role
229:   {#each layout as item}
230:     {#if item === 'playpause'}
231:       <div class="btn" on:click="{togglePlay}" class:active="{isPlaying || isPaused}">
           ^
232:         {#if isPlaying}
233:           <svg {...ICON_SIZE}>
11:34:51 PM [vite-plugin-svelte] /Users/nik/Sites/quantifly-game/node_modules/.pnpm/@lottiefiles+svelte-lottie-player@0.3.0/node_modules/@lottiefiles/svelte-lottie-player/src/components/Controls.svelte:244:6 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
242:       </div>
243:     {:else if item === 'stop'}
244:       <div class="btn" on:click="{stop}" class:active="{isStopped}">
           ^
245:         <svg {...ICON_SIZE}>
246:           <path
11:34:51 PM [vite-plugin-svelte] /Users/nik/Sites/quantifly-game/node_modules/.pnpm/@lottiefiles+svelte-lottie-player@0.3.0/node_modules/@lottiefiles/svelte-lottie-player/src/components/Controls.svelte:244:6 A11y: <div> with click handler must have an ARIA role
242:       </div>
243:     {:else if item === 'stop'}
244:       <div class="btn" on:click="{stop}" class:active="{isStopped}">
           ^
245:         <svg {...ICON_SIZE}>
246:           <path
11:34:51 PM [vite-plugin-svelte] /Users/nik/Sites/quantifly-game/node_modules/.pnpm/@lottiefiles+svelte-lottie-player@0.3.0/node_modules/@lottiefiles/svelte-lottie-player/src/components/Controls.svelte:269:6 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
267:       />
268:     {:else if item === 'loop'}
269:       <div class="btn" on:click="{toggleLooping}" class:active="{loop}">
           ^
270:         <svg {...ICON_SIZE}>
271:           <path
11:34:51 PM [vite-plugin-svelte] /Users/nik/Sites/quantifly-game/node_modules/.pnpm/@lottiefiles+svelte-lottie-player@0.3.0/node_modules/@lottiefiles/svelte-lottie-player/src/components/Controls.svelte:269:6 A11y: <div> with click handler must have an ARIA role

[a4vg]

Why not use the component directly?

<script>
  import { browser } from '$app/environment';
  import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';

  export let src;
  export let width;

  let dataReady = false;
</script>

{#if browser}
  <div style="max-width: {width}px;" class="mx-auto">
    <LottiePlayer
      {src}
      autoplay={true}
      loop={true}
      controls={false}
      renderer="svg"
      background="transparent"
      height={0}
      width={0}
      controlsLayout={false}
    />
  </div>
{:else}
  <div class="flex flex-col gap-6">
    <div class="animate-pulse">
      <div class="w-30 h-60 bg-gray-100 rounded-xl max-w-sm mx-auto"></div>
    </div>
  </div>
{/if}

Also, your height and width props are 0, is that intentional?