vercel deploy gsap premium Next.js

[gold240sx]

Hey, I'm getting an error that i should be logged in. I have an npmrc that looks like this:

 

legacy-peer-deps=true always-auth=true //npm.greensock.com/:_authToken=xxxx-xxxxx-xxxxx-xxxxx-xxxxxxxxxx @gsap:registry=https://npm.greensock.com

 

I included a screenshot of the error I'm getting on deployment. I overrided the install with the npm install --legacy-peer-deps` on the vercel side of things too.

 

I saw the steps here: "https://gsap.com/community/forums/topic/35453-cant-deploy-to-vercel-403-forbidden-error/#comment-177298"

 

 

1. I dont understand the 3rd step..
2. I've been adding my env varibles directly through the Vercel website project settings. I don't have a production / development variations.

 

 

 

 

[Cassie]

Hey!

 

Are you using yarn or npm?

[gold240sx]

npm

[Cassie]

Alright, well that makes things easier. Are you using useGSAP as well?

If so, here's a test repo I put together earlier with the same stack as you. Can you spot any differences? 

 

Also have you tried deleting your package.lock and starting fresh?
 

 

[Cassie]

Some common mistakes that may help narrow this down?

- Installing multiple different versions of GSAP, e.g. from the .tgz, private repo and normal npm repo.

- The token being incorrectly set up in vercel/in the npmrc

- Not registering useGSAP()

 

notes - I've never see the 'legacy-peer-deps=true' line. 

I assume you followed these instructions?
https://gsap.com/docs/v3/Installation/guides/Club GSAP & Vercel/

[gold240sx]

Yes I'm using Next, and useGsap plugin as such:

 

if (typeof window !== "undefined") {

gsap.registerPlugin(ScrollToPlugin)

gsap.registerPlugin(useGSAP)

}

Okay, I found out what it was... I didn't want to give away my GSAP secret and I had it typed into the npm rc file statically. I took the suggestion of using the env variable and added it to my Vercel env variable's. 

 

.npmrc

legacy-peer-deps=true

always-auth=true

@gsap:registry=https://npm.greensock.com

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

 

.env

GREENSOCK_AUTH_TOKEN=GreenSockAuthToken

 

and the fix was removing the .npmrc from my .gitignore files.

 

I hope that it doesn't give me errors every time I try to reinstall node_modules in development (I think that's why I hard set it instead of defining as a value). and why I had hid it to prevent leaking when deploying to GitHub.

 

 

[Cassie]

Yeah, you'll have to swop out this${GREENSOCK_AUTH_TOKEN} for the actual token to install locally, you can just swop it out manually, or set up env vars in your local setup too.

https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

[Cassie]

It's a bit of a faff, but once it's set up you don't need to think about it again. 

 

Glad you got sorted!

[Rodrigo]

1 hour ago, gold240sx said:

I hope that it doesn't give me errors every time I try to reinstall node_modules in development (I think that's why I hard set it instead of defining as a value). and why I had hid it to prevent leaking when deploying to GitHub.

It shouldn't but if you do run into that issue, just delete your package-lock.json file and run the install on the package you need. Also as a recommendation for future projects always install the @gsap/react package before installing the bonus files.

 

Happy Tweening!