Nextjs/Vercel: module-not-found error

[Wardo]

 

I upgraded to a Premium account to use Club Plugins. They installed locally and function correctly, but when I build with Vercel I keep getting this error:

 

Module not found: Can't resolve 'gsap/MorphSVGPlugin'
https://nextjs.org/docs/messages/module-not-found

In my .tsx file, I am importing and registering

import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";

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

and my .npmrc file is in place:

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

I also added GSAP_TOKEN to my Vercel Environment Variables.

 

I have gone through the Forum and tried any appropriate fix, but I'm still at a loss. What am I missing?!

 

Grateful for any assistance. Thanks!

 

[Rodrigo]

Hi @Wardo and welcome to the GSAP Forums!

 

If you have the regular GSAP version installed before upgrading to the bonus tier, you could delete your package-lock.json file locally and push to your repo in order to trigger a deploy and see if that helps.

 

Finally thanks for being a GSAP Club member and supporting GSAP! 💚

 

Hopefully this helps.

Happy Tweening!

[Wardo]

Thanks. Tried that again - no effect. Saw that in the Forum and tried it earlier.

Any other ideas?

I appreciate your help.

[Rodrigo]

Mhh.... maybe you have both packages installed but installing the premium one with this command line should replace the previous installation:

npm install gsap@npm:@gsap/CLUB-LEVEL

What you could try is remove GSAP and delete the package-lock.json file and then install GSAP with the bonus plugins.

 

The  other thing that I missed in the first post is that you're working with NextJS, so you need to import from the dist folder in order to use the UMD modules:

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

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

 

Hopefully this helps.

Happy Tweening!

[Wardo]

Good news! When I did the initial installation on a different project as a GSAP Club member I had no problems with the Club plugins auth via .npmrc and the dotenv that Vercel uses for environment variables. It worked just fine.

 

Despite following your directions, I was unable to completely remove/change something (can't figure out what) that kept bringing up the 'module not found' error when I reinstalled in the project I referenced to you initially. So I just created a new repo for that client with the Club auth and moved in the modules, so I'm good now.

 

Thanks for all your help. I'm very excited about using GSAP to raise the level of my designs!