Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sveltekit and svelte-lottie-player #7

Open
JeffWScott opened this issue Sep 2, 2021 · 8 comments
Open

sveltekit and svelte-lottie-player #7

JeffWScott opened this issue Sep 2, 2021 · 8 comments

Comments

@JeffWScott
Copy link

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
image

But that doesn't solve the issue for me.

The only thing that does is this code:

image

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?

@leouzz
Copy link

leouzz commented Sep 23, 2021

same problem here,
found a solution?

@karamalie
Copy link
Contributor

Hi @leouzz @JeffWScott

document is not defined on the server, so you need to guard against that in your component so that particular piece of code is only run in the browser.

You can use the onMount function which is only run in the browser when the component has been rendered.

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

  onMount(() => {
    // ...
  });
</script>

Sapper works well with most third-party libraries you are likely to come across. However, sometimes, a third-party library comes bundled in a way which allows it to work with multiple different module loaders. Sometimes, this code creates a dependency on window, such as checking for the existence of window.global might do.

Since there is no window in a server-side environment like Sapper's, the action of simply importing such a module can cause the import to fail, and terminate the Sapper's server with an error such as:

ReferenceError: window is not defined

The way to get around this is to use a dynamic import for your component, from within the onMount function (which is only called on the client), so that your import code is never called on the server.

Full working solution is provided below.

Player.svelte

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

	let LottiePlayer;

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

	let controlsLayout = [
		'previousFrame',
		'playpause',
		'stop',
		'nextFrame',
		'progress',
		'frame',
		'loop',
		'spacer',
		'background',
		'snapshot',
		'zoom',
		'info'
	];
</script>

{#if LottiePlayer}
	<LottiePlayer
		src="https://assets2.lottiefiles.com/packages/lf20_wxUJzo.json"
		autoplay={true}
		loop={true}
		controls={true}
		renderer="svg"
		background="transparent"
		height={600}
		width={600}
		{controlsLayout}
	/>
{/if}

You may then import this module into other svelte components as needed.

This was referenced Sep 29, 2021
@subhendupsingh
Copy link

Tried above solution, still getting this error:

Uncaught (in promise) SyntaxError: The requested module '/node_modules/lottie-web/build/player/lottie.js?v=9bced667' does not provide an export named 'default'

@karamalie
Copy link
Contributor

LottiePlayer = module.LottiePlayer;
@subhendupsingh please try pulling the LottiePlayer module instead of default. could you perhaps post up a snippet of the code so we can test it out?

@myhrmans
Copy link

myhrmans commented Nov 9, 2021

Facing the same issue here @karamalie.

From svelte.config.js:
vite: { optimizeDeps: { include: ["lottie-web"], } }

from svelte-kit route:

`

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

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

`

Get the following error:
node_modules/.pnpm/lottie-web@5.8.0/node_modules/lottie-web/build/player/lottie.js?v=5232e3af' does not provide an export named 'default'

Lottie-web installed as a dep.

@sanjeevjayasurya
Copy link

sanjeevjayasurya commented Jan 18, 2022

I was going through the same error when I tried using the svelte-lottie-player along with sveltekit.
I used lottie-player provided by lottie-files themselves
Here's a link for reference:

https://lottiefiles.com/web-player

@Nisthar
Copy link

Nisthar commented May 15, 2022

LottiePlayer = module.LottiePlayer; @subhendupsingh please try pulling the LottiePlayer module instead of default. could you perhaps post up a snippet of the code so we can test it out?

I think the error is with how the library pulls lottie-web

@diegoulloao
Copy link

Still not fixed in 2024?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants