SvelteKit, Vercel and GSAP Business

[Joshua Vachon]

I am trying to deploy my SvelteKit Website on Vercel, but it seems there is an issue with GSAP Business or (maybe) just ScrollTrigger. My code works on localhost and I configured Vercel environnement key NPM_RC with the value from my account license. Even so, I get an error saying it can't find ScrollTrigger's module. I also tried the Dist folder instead, but it didn't work either.

 

How can I solve this?

[Cassie]

Hi there! This thread may help.

There's some issues with yarn and private modules 
 

 

[Cassie]

And this post - https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-vercel

[Joshua Vachon]

Hi! I tried the solution on PrivJS, but I get the same error.

 

 

[GreenSock]

Did you try adding a .js to the end of your imports? Like: 

 

import ScrollTrigger from "gsap/ScrollTrigger.js";

I'm totally guessing here. It's tough to troubleshoot just by looking at an error message screenshot. 

 

@Prasanna any other suggestions? 

[Joshua Vachon]

Yes, I tried but not such difference. The error message on Vercel is a bit different, but this error message isn't of great help.

[GreenSock]

It's super tough to troubleshoot blind, but this sure sounds like a Vercel issue that you should raise with that team. 🤷‍♂️

[chimp1nski]

Hey. Don't know if this is resolved yet. I ran into some minor issues on Netlify. Was easy to resolve though and shouldn't be too different on vercel.

1. You need to add the generated gsap authToken to a ".npmrc" file in your repository root.
Now in order to not leak your GSAP key, you should put it in an environment variable (NPM_TOKEN).
You should be able to access this token  in the .npmrc via ${NPM_TOKEN} like in the example here:

//npm.greensock.com/:_authToken=${NPM_TOKEN}
@gsap:registry=https://npm.greensock.com

This could vary a bit for the business license but should be explained on the gsap installation page.
Important: Don't forget to add the variable to Vercel where you actually add your gsap key.

This could vary a bit on Vercel but I am pretty sure if you search the web for "Vercel .npmrc env variable" you'll find something.

2. I had some issues with the imports not working where the solution was to import from the dist folder.
Oddly enough you need to add .js at the end of the import - it won't work otherwise.

Here's an example of my imports that actually work:
 

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

 

[Cassie]

Thanks for dropping by ☺️