GSAP Club Plugins on Vercel

[Polfunus]

Hi,

 

I have a Problem with my project on Vercel and GSAP Bonus Plugins. I don't know if i can paste the code in CodePen since it's Typescript and Next.js so i added some screenshots of the code.

 

Locally everything works fine, but on Vercel i get this Building Log Errors:

Attempted import error: 'GSDevTools' is not exported from 'gsap/all' (imported as 'GSDevTools').

Attempted import error: 'DrawSVGPlugin' is not exported from 'gsap/all' (imported as 'DrawSVGPlugin').

 

I have generated a PRIVJS_TOKEN and installed all Bonus Plugins via npm locally.

 

In the console of the browser i get this errors:

"Invalid property drawSVG set to 0 Missing plugin? gsap.registerPlugin()"

On the page with GSDevTools:
"TypeError: Cannot read properties of undefined (reading 'create')

    at t.scope (page-8767ab4b0a42733d.js:1:421)

    at n (c15bf2b0-952eb82c0e367179.js:9:43759)

    at e.add (c15bf2b0-952eb82c0e367179.js:9:43855)

    at 226-e8e6167106ef4652.js:9:509

    at aI (fd9d1056-76286ddac84065c4.js:1:72854)

    at aU (fd9d1056-76286ddac84065c4.js:1:72914)

    at aV (fd9d1056-76286ddac84065c4.js:1:73353)

    at a2 (fd9d1056-76286ddac84065c4.js:1:84242)

    at aV (fd9d1056-76286ddac84065c4.js:1:73340)

    at a2 (fd9d1056-76286ddac84065c4.js:1:84242)"

[Cassie]

Heya! A few questions,

 

Are you using React or Next? (If you're using Next, try this)

// Register the plugin only in the client side
if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

Can you try adding useGSAP to your plugin registration?

gsap.registerPlugin(useGSAP);

If you use this import instead of /all - does it change anything

import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";

Let me know!

[Polfunus]

I use Next.js, with Typescript.

 

The tip with the window didn't change anything. ( Maybe it's because I already marked the Component as a Client-Component)

 

Registering useGSAP Hook also didn't help, i use it on other components without it and they all work.

 

When i use "gsap/DrawSVGPlugin" as import, the build fails, with this error message:

Module not found: Can't resolve 'gsap/DrawSVGPlugin'

 

 

Heres a screenshot of my package.json ( maybe it helps )

[Cassie]

Maybe @Rodrigo can spot something. I'm out of ideas here, unless you can swing me your repo?

 

[Rodrigo]

Hi,

 

In Next you have to import the UMD modules for the plugins:

import gsap from "gsap";
import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin";
import { useGSAP } from "@gsap/react";

if (typeof window !== "undefined") {
  gsap.registerPlugin(DrawSVGPlugin, useGSAP);
}

Finally in Vercel be sure to add an environmental variable for your token as shown in our installation docs:

https://gsap.com/docs/v3/Installation/guides/Club GSAP & Vercel

 

Finally be sure to not push your token to a public repo in the .npmrc file.

 

Hopefully this helps.

Happy Tweening!

[Polfunus]

Hi,

 

thank you all for your help! But I still get a failed Deployment with the message:

Module not found: Can't resolve 'gsap/dist/GSDevTools'

Module not found: Can't resolve 'gsap/dist/DrawSVGPlugin'

 

I followed the guide in the docs, but maybe I'm missing something.

 

If it has to be, i could give you my repo.

[Cassie]

Hey - I've made a demo repo for you

Here's the repo incase there's anything useful there?
https://github.com/cassieevans/vercel-clubGSAP/blob/main/.npmrc

Here's the site -
https://vercel-club-gsap.vercel.app/

 

Here's what my env var looks like on vercel.

This is what my npmrc looks like

always-auth=true
@gsap:registry=https://npm.greensock.com
//npm.greensock.com/:_authToken=${PRIVJS_TOKEN}

I just followed the instruction in the vercel guide in our docs so I'm afraid I'm at a loss of how to help here. You may just have to play spot the difference between this repo and yours?

 

Sorry I can't help any more than this. At least we know it is possible and there's not a big glaring issue anywhere.

 

[Polfunus]

Hi everyone,

 

Rodrigo could find the problem:

 

I installed three different gsap packages (the public one, the bonus.tgz file and with the token.)

 

So I deleted my package-lock.json and pushed those changes to my repo.

 

After that everything worked fine.

 

Thank you Rodrigo and Cassie for all your time and effort, I really appreciate it!

 

Best,

Paul