GSAP Club Plugins error in Next.js build to Vercel.

[jorik.tsx]

Good afternoon.
I am at a loss regarding the Club Plugins and deploying to Vercel.
 

I have done the following things (after reading documentation):

• Set up a .npmrc file with the following content:
  always-auth=true

  //npm.greensock.com/:_authToken=${GSAP_TOKEN}

  @gsap:registry=https://npm.greensock.com
• Added the ${GSAP_TOKEN} to both my .env.local and in Vercel in the environment variables.
  
• Installed the gsap Business package like so: npm install gsap@npm:@gsap/business
• I have checked the package.json and it is present as:
  "gsap": "npm:@gsap/business@^3.12.5",
• I have created some animations and I import/register them like so:
  import { useGSAP } from "@gsap/react";

  import gsap from "gsap";

  import DrawSVGPlugin from "gsap/DrawSVGPlugin";
  And so:
  if (typeof window !== "undefined") {

  gsap.registerPlugin(DrawSVGPlugin, useGSAP);

  }
• Developing in localhost provides no errors.
• Building on Vercel shows me the error:
  
• When I try to do install the business packages again, it says:
  npm error code E403
npm error 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2fbusiness - bad authorization header. Please login again
npm error 403 In most cases, you or one of your dependencies are requesting
npm error 403 a package version that is forbidden by your security policy, or
npm error 403 on a server you do not have access to.
  
   

So, I am at a loss.. Maybe some fresh eyes can see my simple mistake? 
Thanks in advance!

Cheers, Jorik

[Cassie]

Hi there, is your .npmrc pushed up to the repo? Sometimes people hide it in the .gitignore which means Vercel can't see it.

[jorik.tsx]

Hi Cassie!
Yes, it is present in the repo.
Must admit that I did first put it in the .gitignore, but removed it before I posted this.

NOTE: Also tried to import the plugin like so, but to no avail.

"gsap/dist/DrawSVGPlugin";

[Cassie]

Ah ok, so you had it in the .gitignore, then tried to build on vercel - then removed it and tried to do the build again?

 

Quote

npm error 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2fbusiness - bad authorization header. Please login again

This is saying that you're not successfully installing the club GSAP files, that's why you can't import a club plugin, it's not down to your import syntax, it's just not available.

 

Can you start fresh with a new vercel deploy? It's possible that Vercel's got confused about where to install GSAP from if you hadn't made the token available the first time you tried.

 

Here's some info on clearing your build cache in Vercel

 

https://vercel.com/docs/deployments/troubleshoot-a-build#managing-build-cache 

 

Here's a successful vercel build and example repo, maybe it'll be helpful!

 

[jorik.tsx]

Yes, multiple builds.
BUT, ALL OF A SUDDEN, WITNESS:
As you can see I tried some redeploys, with new caching and did not work. But, suddenly 1 did work. And after reverting the /dist import, it still worked. So I think it had to with caching..

[Cassie]

Ahahah. 🌟 t e c h n o l o g y 🌟 

Gotta love it, I'm glad you got it sorted, Vercel's caching is definitely a pain! 

Thanks for supporting us with a membership btw 💚 Hope the rest of your project goes smooooothly

[jorik.tsx]

Awesome!
Thanks for the quick replies and I am sure that it will go smoothly.
Can't wait to try out the SplitText.

Go GSAP! 🐲

[jorik.tsx]

Oh, whoops..
🚨🚨🚨🚨🚨🚨🚨
After merging to main it does not work anymore..
The same caching thing?

[Cassie]

If it's working locally, the issue is with the information that Vercel has.

That's either because you're pushing up...

 

1) Too little information  - i.e. No .npmrc

2) The wrong information - i.e. Typo, incorrect token, wrong GSAP registry

Or
You've pushed up the wrong information in the past and now Vercel is confused. When I run into build issues locally I will delete package.lock and node modules and start again. You likely need to do whatever Vercel's equivalent of that is.

SO first - check that all your info is correct,

Then take a look at this link that shows how to handle cache issues with a build
https://vercel.com/docs/deployments/troubleshoot-a-build#managing-build-cache