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/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/respond.js:483:13)
    at resolve (/Users/nik/Sites/quantifly-game/node_modules/.pnpm/@[email protected][email protected][email protected]/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/@[email protected][email protected][email protected]/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/@[email protected][email protected][email protected]/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/[email protected]/node_modules/uuid/dist/esm-browser/index.js11:34:51 PM [vite-plugin-svelte] /Users/nik/Sites/quantifly-game/node_modules/.pnpm/@[email protected]/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/@[email protected]/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/@[email protected]/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/@[email protected]/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/@[email protected]/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/@[email protected]/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?