gsap FLIP plugin issues with svelte typescript.

[y_springfield]

Greetings Everyone, hope you are fine. Please I'm faced with a difficulty.
I just created a basic sveltekit typescript template project.
Immediately installed gsap with flip plugin.
opened index.svelte and imported flip plugin as follows

	import { Flip } from 'gsap/Flip';

and compiled the application and it's failing with the error as shown in the image.
 I've been unable to resolve it for close to a day now.
Please, can anyone help me on how to import gsap flip plugin in sveltekit properly.
if I import gsap it functions fine but not the flip plugin.
I've tried the solutions outlined here to no avail.

[OSUblake]

Hi @y_springfield

 

I'm not familiar with sveltekit, but that error message looks like it doesn't support actual ES modules. Please look at the installation helper.

https://greensock.com/docs/v3/Installation?checked=core,flip#umd

 

import { gsap } from "gsap/dist/gsap";
import { Flip } from "gsap/dist/Flip";

gsap.registerPlugin(Flip);

 

1 hour ago, y_springfield said:

if I import gsap it functions fine but not the flip plugin.

 

The build is using gsap's package.json to get the correct file, so this...

import { gsap } from "gsap";

 

....actually becomes this behind the scenes.

const { gsap } = require("gsap/dist/gsap");

 

Unfortunately, build systems aren't smart enough to do the same for gsap's plugins. ?

 

Some frameworks like nuxt allow you add a package for it to transpile, so you don't have specify the dist files. Perhaps sveltekit has something similar to that.

 

[y_springfield]

Hi @OSUblake, thanks for your response. The umd file import method did work.
With respect to the transpile, don't know of that in sveltekit. Will checkout more on it.
Once more, thanks.