Gsap / Sveltekit / Typescript - Production issues

[Cossetteqc]

Hi team ! 

I'm a bit surprised that after an hour or so in the forums, that this issue is still unresolved by the team, or the community. 

I'm having trouble to find a simple solution in using gsap (with types) in my project. I read everywhere about ESModule Vs UMD, but none works for me on my project. The only import that is working for me is : 

 

import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js';

 

If I use it without the extension, my app throw a Cannot find module error telling me to use the .js extension.

Believe me, I tried every single import (ES, UMD, ...), this is the only one working in production. 

 

Doesn't bother me that much, I created an wrapper around it so it's easier to import in my svelte files. The only thing I have not are the types. When importing JS files, I don't have any types out of the box so I can't type any of my gsap animations. 

I looked into solutions or questions in the forum but none seems to work for me, the Sveltekit team answered to you that your package was broken and closed the issue : https://github.com/sveltejs/kit/issues/9824

I read in your forum that your team says it's a Vite or Sveltekit issue, so I don't really know who's right or not.

Anyway, I think I'm not alone that want to this this fixed, hope you guys will fix this in future versions! Or come with a robust solution to get both imports and types working together. 

Thanks a lot!
Valentin

[Rodrigo]

Hi @Cossetteqc and welcome to the GSAP Forums!

 

Sorry about the delay but we also need some rest and leisure in our lives, considering that you posted on a Saturday afternoon, thanks for understanding and for your patience.

 

I just created a new SvelteKit app in my local machine and used this approach without any issues:

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

if (typeof window !== 'undefined') {
  gsap.registerPlugin(ScrollTrigger);
}

I even ran the lint, check and build commands without any issues and my build preview is working as expected.

 

Can you create a minimal demo in Stackblitz that clearly illustrates the issue. Here is a simple demo that uses ScrollTrigger:

https://stackblitz.com/edit/sveltejs-kit-template-default-unljf6

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Also, I looked at that link where the claim was made that the GSAP package was "broken" but I don't think that's quite a fair assessment. The GSAP package has to accommodate both ES Modules AND CommonJS (UMD) ones. We can't just set the "type" in the package.json to be commonjs or module or else it'll break probably thousands of people's repositories. It's not one or the other. If anyone has a solution to make it all work for both without breaking people's repositories, I'm all ears! 

 

But like @Rodrigo said it seems to work fine if you import from the correct spots. Perhaps we're missing something, but we know that other Sveltekit users are able to leverage GSAP quite a bit with no problem at all. I'm not a Sveltekit guy, sorry. 🤷‍♂️

[Rodrigo]

Hi @Cossetteqc,

 

I dug a little regarding this and SvelteKit doesn't have an option to transpile ES Modules. The alternative would be to install and configure Vite's Babel plugin in your Vite config in order to use ES Modules:

https://www.npmjs.com/package/vite-plugin-babel

 

Considering the fact that you can safely use the UMD modules from the dist folder in the GSAP package, that seems like the easiest and simplest route, just check if window is defined in order to register the GSAP plugins on the client and not when the code runs in the server. So we strongly recommend this approach and exhaust every possible alternative with this in mind before digging into the whole Vite/Babel config option just for simplicity's sake, nothing more.

 

Happy Tweening!

[Cossetteqc]

Hi guys ! My time to apologize for the delay, didn't get notified for your answers. 

@Rodrigo I'm already using your approach for my SvelteKit apps and it works well. But I don't have any types. 

Maybe you'll have a solution for me like adding the types in my tsconfig which doesn't work for me either ? I got this in my tsconfig.json:

 

{

"extends": "./.svelte-kit/tsconfig.json",

"compilerOptions": {

"allowJs": true,

"checkJs": true,

"esModuleInterop": true,

"forceConsistentCasingInFileNames": true,

"resolveJsonModule": true,

"skipLibCheck": true,

"sourceMap": true

},

"files": ["node_modules/gsap/types/index.d.ts"]

The only way for me to get the types is to import from the package directly. But this breaks my app in production. Unable to build on vercel/netlify, errors when building locally.

 

So either I have the types but can't use gsap as it's broken, or I get gsap without the types, and have to create a declaration.d.ts file to declare all the modules.

I can grant access to any github repo if you need to investigate this, or any other solution if needed, let me know ✌️

[Rodrigo]

Hi,

 

Sorry to hear about the troubles but I don't use typescript so I can't really tell you about your latest questions. Can you share a small test repo (no need for the entire project) that replicates this problem with just one single page and the steps to reproduce it? The fail local build I assume running npm run build.

 

I just created a new sveltekit project locally with typescript and I didn't got any errors neither in development nor in the build command with this code:

import { onMount } from 'svelte';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

if (typeof window !== 'undefined') {
  gsap.registerPlugin(ScrollTrigger);
}

onMount(() => {
  const ctx: gsap.Context = gsap.context(() => {
    const t: GSAPTween = gsap.to('h1', {
      yPercent: 100,
      ease: 'none',
      scrollTrigger: {
        trigger: '.content',
        start: 'top top',
        end: '+=100%',
        pin: true,
        scrub: true,
        markers: true
      }
    });
  });

  return () => ctx.revert();
});

Both my Prettier and ESLint config files are the default ones SvelteKit creates.

 

Sorry I can't be of more assistance.

Happy Tweening!