Jump to content
Search Community

Nextjs/Vercel: module-not-found error

Wardo test
Moderator Tag

Go to solution Solved by Wardo,

Recommended Posts

 

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!

 
Link to comment
Share on other sites

  • Wardo changed the title to Nextjs/Vercel: module-not-found error

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!

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • Solution

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!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...