I get this error when building my project with an imported LottiePlayer

document is not defined ReferenceError: document is not defined

I read some other issue where they suggested adding this vite config item to the svelte.config.js

But that doesn't solve the issue for me.

The only thing that does is this code:

But this causes some ugly popin of the player. I want the animation to render on first draw. Any suggestions? Does LottiPlayer not work for static sites?

Is there a specific way to use events?

How do I listen to events when using this library? The standard Svelte way doesn't work:

<LottiePlayer
		on:frame={console.log}
		on:stop={console.log}
		bind:this={player}
		src={Logo}
		autoplay={true}
		loop={true}
		height={120}
		width={120}
	/>

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

I got a warning that document is not defined in my terminal.

I'm using SvelteKit.

<script lang="ts">
	//@ts-ignore
	import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
</script>

<LottiePlayer
	  src="/checkmark.json"
	  autoplay={true}
	  loop={true}
	  renderer="svg"
	  background="transparent"
	  height={600}
	  width={600}
/>

this is the error I'm getting:

Error: <LottiePlayer> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled module

Compiling with webpack and using svelte-loader, warnings are logged for the following:

Controls.svelte:
A11y: on:mouseout must be accompanied by on:blur (330:6)
A11y: on:mouseout must be accompanied by on:blur (412:8)
A11y: on:mouseover must be accompanied by on:focus (330:6)
A11y: on:mouseover must be accompanied by on:focus (412:8)

Popover.svelte:
A11y: on:mouseout must be accompanied by on:blur (81:0)
A11y: on:mouseover must be accompanied by on:focus (81:0)

Would it make sense to implement on:blur and on:focus for these cases? Otherwise, it looks like these warnings can be suppressed by adding a svelte-ignore comment above each line, i.e.
<!-- svelte-ignore a11y-mouse-events-have-key-events -->

Hello,

I get this error when I try to import lottie, anyone who knows how to fix this?

error message:

'LottiePlayer' is declared but its value is never read.js(6133)
Could not find a declaration file for module '@lottiefiles/svelte-lottie-player'. 'c:/sites/components/components-app/node_modules/@lottiefiles/svelte-lottie-player/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/lottiefiles__svelte-lottie-player if it exists or add a new declaration (.d.ts) file containing declare module '@lottiefiles/svelte-lottie-player';js(7016)

Thanks in advance !

Not Found - GET https://registry.npmjs.org/@types%2flottiefiles__svelte-lottie-player - Not found

Could not find a declaration file for module '@lottiefiles/svelte-lottie-player'. '/Users/zzz/Projects/cto-for-hire/ctoforhire-svelte/node_modules/@lottiefiles/svelte-lottie-player/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/lottiefiles__svelte-lottie-player` if it exists or add a new declaration (.d.ts) file containing `declare module '@lottiefiles/svelte-lottie-player';`ts(7016)

In 2023 you'd expect node modules to have TypeScript by default..

First off- thanks for this amazing package! I spent way too long trying to get lottie to play nicely with Svelte. Meanwhile this just works 🎉

Second- I've been struggling with manually triggering the play() event.

After importing with import { LottiePlayer, play } from '@lottiefiles/svelte-lottie-player';

When I run play(), I'm told it's not a function.

Sorry for the confusion!

Currently we can only specify the width and height using pixels. It would be cool if there was someway we could also support rem, percentages, view based units, etc.

the onDestroy() method uses SSR and thus doesn't have the document defined. Needs to be removed.

The current LottiePlayer.svelte component uses bind:clientWidth and bind:clientHeight on lines 560-561.

In svelte, bind:clientWidth/Height attaches an empty iframe to monitor these properties of an element. However, attaching an empty iframe can cause significant slowdowns.

This use case of bind:clientWidth/Height isn't even justified, because the ONLY time where these variables are used is in the toggleZoom() function, which just reads them. There's no effects that could run when these properties change, it's unnecessarily slowing down the web page. Plus, we already have a wrapperRef which references the exact element these bindings are on.

Solution:

Get rid of the old variables.
Get rid the lines 560-561.
On the lines 485-486, use wrapperRef.clientHeight/Width.

---  wrapperRef.style.height = playerHeight + "px";
---  wrapperRef.style.width = playerWidth + "px";
+++  wrapperRef.style.height = wrapperRef.clientHeight + "px";
+++  wrapperRef.style.width = wrapperRef.clientWidth + "px";

Though I don't have the exact numbers, this will definitely speed up the component.
I'll create a pull request a little bit later.

the library works with .json files but when I tried to load a .lottie file, I got error below:

lottie.js:1157 Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'json').

Please advise.

svelte-lottie-player seems not to work with the latest sveltekit (SvelteKit v1.0.0-next.113).

Here is the error message:
SyntaxError: The requested module '/node_modules/lottie-web/build/player/lottie.js?v=8db5e539' does not provide an export named 'default'

See the following output from Svelte:

9:35:03 p.m. [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

@lottiefiles/[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition

Action is required to update this package to use the new standard otherwise it will break in future versions.