velvet sparrow
I'm using the Vue integration, and trying to import the MotionPathPlugin for Greensock animation Platform, but i get the cannot use import statement outside a module. I'm confused because all the other import statements have worked fine in the component. I thought vue/astro would bundle all the code i'm using from node into a module for me?
<script setup lang="ts">
import {gsap} from "gsap" // works fine
import {MotionPathPlugin} from "gsap/MotionPathPlugin" // throws error
gsap.registerPlugin(MotionPathPlugin)
On the Astro side of things, it's hydrated client-side with
<VueComponent client:only="vue" />
The greensock docs mention adding lines to the build configuration, but I don't think that's the issue. My current work around has been to use
const MotionPathPlugin = await import("gsap/MotionPathPlugin")
which removes the error, though I don't understand these imports in context of astro/vue, client/server and why only some modules need this type of dynamic import. Is this the correct way to solve this? A higher level explanation of what's going on here would also be appreciated too, thanks!
ivory prawn