Import Error: Programmatically control animation

[scrapix]

Hey Matt,

thank you for this great wrapper. - The defaults work perfectly! When trying your example

<script lang="ts">
    import { Lottie } from 'lottie-svelte';
    import type { AnimationEvent } from 'lottie-svelte/iface';

    // import { Direction } from "lottie-svelte/iface";

    function handler(event: AnimationEvent) {
        const animation = event.detail; // lottie-web AnimationItem
        animation.setSpeed(0.2);
        setTimeout(() => animation.pause(), 1500);
    }
</script>

    <Lottie path="graphics/mylottie.json" on:animation={handler} />

Im receiving an import error. Do you know what I'm doing wrong?

[2023-03-06 13:00:07] waiting for changes...
bundles src/main.js → public/build/bundle.js...
[!] (plugin commonjs--resolver) ParseError: Unexpected token
src/components/lottie.svelte
1: <script lang="ts">
2:     import { Lottie } from 'lottie-svelte';
3:     import type { AnimationEvent } from 'lottie-svelte/iface';
                   ^
4: 
5:     // import { Direction } from "lottie-svelte/iface";
    at error (/Users/jb/dev/svelte-tut1/hello-world/node_modules/svelte/src/compiler/utils/error.ts:25:16)
    at Parser$1.error (/Users/jb/dev/svelte-tut1/hello-world/node_modules/svelte/src/compiler/parse/index.ts:105:3)
    at Parser$1.acorn_error (/Users/jb/dev/svelte-tut1/hello-world/node_modules/svelte/src/compiler/parse/index.ts:98:8)
    at Object.read_script [as read] (/Users/jb/dev/svelte-tut1/hello-world/node_modules/svelte/src/compiler/parse/read/script.ts:42:10)
    at tag (/Users/jb/dev/svelte-tut1/hello-world/node_modules/svelte/src/compiler/parse/state/tag.ts:207:27)
    at new Parser$1 (/Users/jb/dev/svelte-tut1/hello-world/node_modules/svelte/src/compiler/parse/index.ts:57:12)
    at parse (/Users/jb/dev/svelte-tut1/hello-world/node_modules/svelte/src/compiler/parse/index.ts:222:17)
    at compile (/Users/jb/dev/svelte-tut1/hello-world/node_modules/svelte/src/compiler/compile/index.ts:122:14)
    at Object.transform (/Users/jb/dev/svelte-tut1/hello-world/node_modules/rollup-plugin-svelte/index.js:144:21)
    at /Users/jb/dev/svelte-tut1/hello-world/node_modules/rollup/dist/shared/rollup.js:24694:40

[MattDavis00]

Hi there! First of all, sorry for the slow reply. What type of environment are you running this in? It looks like a bundler issue to me, i.e something that needs changing in your sveltekit/vite/rollup config depending on what you're using. For example, is it possible you don't have typescript extensions/plugins enabled for whatever environment this is running in?

(If you already found a solution in the meantime, I'd be very greatful if you could post it here for others to see in the future. And so I can see if the documentation needs something adding)

[MattDavis00]

https://stackblitz.com/edit/vitejs-vite-o6z51r?file=src/App.svelte

Here is a stackblitz of the example using the vite svelte-ts template as the base environment, hopefully this may help with debugging. If you're using SvelteKit, I think the standard defaults should work?