Comments (8)
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.
from svelte-lottie-player.
same problem here,
found a solution?
from svelte-lottie-player.
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'
from svelte-lottie-player.
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?
from svelte-lottie-player.
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/[email protected]/node_modules/lottie-web/build/player/lottie.js?v=5232e3af' does not provide an export named 'default'
Lottie-web installed as a dep.
from svelte-lottie-player.
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
from svelte-lottie-player.
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
from svelte-lottie-player.
Still not fixed in 2024?
from svelte-lottie-player.
Related Issues (16)
- How to control manually? HOT 2
- Accessibility warnings
- document is not defined HOT 2
- Error when importing lottie HOT 1
- error when loading .lottie files HOT 1
- No typescript? HOT 5
- Could not load content (LottiePlayer.svelte) // Error HOT 1
- Useless `bind:clientWidth` and `bind:clientHeight`
- SvelteKit issue HOT 5
- Package will break in future Svelte versions
- How do I use events like when animation finishes? HOT 5
- Width and Height "other" unit support HOT 2
- Not a valid SSR component HOT 1
- document is not defined in onDestroy() HOT 1
- Not able to listen to any events HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-lottie-player.