Why is animejs throwing this error on build in the svelte-kit skeleton project?

Question

I've installed animejs with npm using npm install animejs

<script>
    import anime from 'animejs';

    let heroTimeline = anime.timeline({autoplay: true});
    let heroAnimation = {
        targets: "#hero grow",
        opacity: {
            value: [0, 1],
            duration: 800,
            easing: 'easeOutExpo',
        },
        scale: {
            value: [0, 1],
            duration: 1000,
            easing: 'easeOutElastic(1, .8)',
        }
    }
</script>

This code throws the following error:

ReferenceError: window is not defined
    at makePromise (D:\Sync\Web\portfolio-website\node_modules\animejs\lib\anime.js:927:19)
    at anime (D:\Sync\Web\portfolio-website\node_modules\animejs\lib\anime.js:933:17)
    at Function.timeline (D:\Sync\Web\portfolio-website\node_modules\animejs\lib\anime.js:1264:12)
    at index.svelte:4:39
    at Object.$$render (D:\Sync\Web\portfolio-website\node_modules\svelte\internal\index.js:1684:22)
    at Object.default (root.svelte:38:46)
    at Object.default (/src/routes/__layout.svelte:12:50)
    at eval (/src/lib/ThemeContext.svelte:46:41)
    at Object.$$render (D:\Sync\Web\portfolio-website\node_modules\svelte\internal\index.js:1684:22)
    at eval (/src/routes/__layout.svelte:11:100)

I also get the same error from importing from 'animejs/lib/anime.js' and 'animejs/lib/anime.min.js'. If I try importing from 'animejs/lib/anime.es.js' I get the following error:

D:\Sync\Web\portfolio-website\node_modules\animejs\lib\anime.es.js:1310
export default anime;
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at nodeRequire (D:\Sync\Web\portfolio-website\node_modules\vite\dist\node\chunks\dep-85dbaaa7.js:66556:17)
    at ssrImport (D:\Sync\Web\portfolio-website\node_modules\vite\dist\node\chunks\dep-85dbaaa7.js:66498:20)

Any ideas on how to fix it. Other than this the project is the default svelte skeleton project generated by svelte-kit.

score 2 · Answer 1 · answered Nov 13 '21 at 00:43

2

Try to use onMount function for exemple:

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

    onMount(() => {
        
        let heroTimeline = anime.timeline({autoplay: true});

</script>

in onMount function you can use vanilla javascrpt

answered Nov 13 '21 at 00:43

Deotyma

677
2
8
25

This worked for animejs. Just tried importing ScrollMagic and had exactly the same problem, even when placing any calls inside onMount – Alex Davies Nov 13 '21 at 14:29

Why is animejs throwing this error on build in the svelte-kit skeleton project?

1 Answers1