Vercel --prod is not working

[wen huat]

Hello, I have a few questions regarding an issue I'm encountering. The problem is that the module 'gsap/ScrambleTextPlugin' cannot be found. This issue occurs when I use the command 'vercel --prod', but there are no problems when using 'npm run dev'. I've attempted the solution provided in this article (https://www.privjs.com/blog/how-to-install-club-greensock-packages-on-vercel), but it was unsuccessful. It's important to note that I'm using the premium version of the package

[GreenSock]

Thanks for being a Club GSAP member, @wen huat! 💚

 

I'm not quite sure what to advise here, as it's tough to troubleshoot without being able to recreate the issue, but did you create the environment variable like the article suggested? And you definitely have the npmrc file with always-auth=true? And you installed it like: 

npm install gsap@npm:@gsap/shockingly

?

 

I'm curious if you are able to look in the node_modules/gsap folder and see ScrambleTextPlugin there. It seems like the error message indicates the file doesn't exist(?) 

 

If you can't get that working, I wonder if there's a way you can just download the zip file, grab the gsap-bonus.tgz file from the "npm-install-this" folder, drop it into your project folder, and run npm install ./gsap-bonus.tgz (which is just using an actual file instead of pulling from a remote repository - no authentication required). 🤷‍♂️

[Rodrigo]

Hi,

 

Is your project working as expected locally? Are you getting the same(or another) error?

 

Here is a repo using Next and the bonus plugins that is working as expected:

https://github.com/rhernandog/gsap-bonus-npm-vercel

 

In your projects settings create an environmental variable that matches the configuration of your .npmrc file:

Your .npmrc file should look like this in your repo:

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

Is super important to add the dollar sign and the curly braces around the variable.

 

If you check the deployment URL and open the console you'll see an object that contains a reference to the MorphSVG Plugin:

https://gsap-bonus-npm-vercel.vercel.app/

 

Hopefully this helps.

Happy Tweening!

[wen huat]

Yeahh i think i manage to got it work