Svelte with snowpack gives "Not Implemented: Animation" when trying to import transitions

Question

Usually, I can import a flip or other animations in svelte like this:

import { flip } from "svelte/animate";

However, I'm unsure why I'm getting the following error in snowpack with svelte:

Build Error: @snowpack/plugin-svelte
Error: Not implemented: Animation

Source
/Users/duane/Braid/ribbon/client/src/Posts/PostsPage.svelte
Error: Not implemented: Animation
    at /Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27126:28
    at Array.forEach (<anonymous>)
    at new InlineComponent$1 (/Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27087:26)
    at /Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27358:23
    at Array.map (<anonymous>)
    at map_children (/Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27353:22)
    at new IfBlock$1 (/Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27063:26)
    at /Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27358:23
    at Array.map (<anonymous>)
    at map_children (/Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27353:22)
    at new Fragment (/Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27410:26)
    at new Component (/Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:27547:26)
    at Object.compile (/Users/duane/Braid/ribbon/node_modules/svelte/compiler.js:28753:24)
    at Object.load (/Users/duane/Braid/ribbon/node_modules/@snowpack/plugin-svelte/plugin.js:120:31)
    at async runPipelineLoadStep (/Users/duane/Braid/ribbon/node_modules/snowpack/lib/index.js:74471:28)
    at async Object.buildFile (/Users/duane/Braid/ribbon/node_modules/snowpack/lib/index.js:74638:24)

Am I missing something?

question from:https://stackoverflow.com/questions/66056367/svelte-with-snowpack-gives-not-implemented-animation-when-trying-to-import-tr

Answer 1

It turns out this has nothing to do with snowpack.

Instead, the "Not implemented: Animation" error arises when you try to add an "animate:flip" or "transition:slide" (for example) on a component (e.g. <MySpecialButton />). The animate: and transition: attributes can only go on DOM elements like <div />, etc.