Hache Posted November 20, 2022 Share Posted November 20, 2022 Hello, my subscription ended a few months ago, I was pretty sad with some GSAP issues I had and I didn't renew my license . The reason was mainly because I wanted to use it on my personal projects(public repos) and I couldn't deploy a react or nextjs project to vercel following instructions without exposing my gsap key. my environment variables weren't being read on the yarnrc. yml file so I had to hardcode the secret key in the code(having to make the repo private, so back to square one). This is another thing completely but I also had issues in Nextjs with official gsap react demos, using the useLayoutEffect hook things didn't work as expected sometimes, didn't know why, so I was wondering if there was going to be more SSR/Nextjs content. I work with react + nextjs, also plain html + css + js with vite(with github pages for this) and maybe I try some random framework here and there(vue, remix, astro, etc) and I deploy to different hostings, although mostly vercel. I would love to get back into GSAP but not if every deployment is going to be complete suffering. Cheers Link to comment Share on other sites More sharing options...
GreenSock Posted November 20, 2022 Share Posted November 20, 2022 Ugh, that's painful to hear about, @Hache. Very sorry that it was annoying like that. I'm really not sure what to do about the token issue for repos that you want to publish publicly. Open to ideas if you've got any. As for Next and the useLayoutEffect() issues, I wonder if that was related to the React 18 double-call(?) That'd affect .from() calls logically, but a while back we introduced gsap.context() which should be your new best friend in React/Next. Seriously, it'll save you a lot of headaches, not only with its easy revert() functionality, but also for its scoping capabilities because it saves you from "Ref Hell" (you don't have to create a ref for every element you want to animate - just use selector text). We've updated our React guide here: It may be worth giving things another shot. I'd bet you'll find that once you wrap your stuff in gsap.context(), you'll fall in love again and you won't run into any odd behavior with useLayoutEffect() (I'm totally guessing because I don't actually know what issue you were running into since we don't have a minimal demo to look at). Of course that doesn't solve the token annoyance, but at least it's a big step in a good direction (I hope). Again, sorry to lose you as a Club GreenSock member. If there's anything else we can do to serve you better and win you back, let us know. We really do care about having happy customers around here. It's a big passion of ours. A little piece of us dies inside when we hear from an unhappy customer. Luckily that's pretty rare. Thanks for your support in the past! 💚 Link to comment Share on other sites More sharing options...
Rodrigo Posted November 21, 2022 Share Posted November 21, 2022 Hi, Regarding the useLayoutEffect and SSR issues, @OSUblake crafted a very simple solution for that, you can read about it here: https://greensock.com/react-advanced#useIsomorphicLayoutEffect As for the deployment issues with a private key here is a repo that is actually working for me without issues: https://github.com/rhernandog/next-gsap-bonus-yarn What I do is create a .npmrc file with the following content: always-auth=true registry=https://npm.greensock.com @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=NPM_TOKEN Then in my local environment I create a .env.development.local file that has the npm token in it: NPM_TOKEN=<your-token-here> Of course neither of these files can be pushed into a repo so you have to setup your npm token in the settings on vercel. In your project page go to the Settings tab: There go to the Environment Variables section on the left side: There you can set your token and keep it completely safe and your deployments should work without any issues. You can see a live version here: https://next-gsap-bonus-yarn-l1l0hhlsm-rhernando.vercel.app/ As you can see is not much, just a proof of concept that the bonus plugins are loaded and available without any issues. Let us know if you have more questions. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Olav Posted April 24, 2023 Share Posted April 24, 2023 Hi @Rodrigo, I'm facing the same challenge as OP regarding the public repository, next.js and Vercel. Like you have instructed I added an environment variable to Vercel: https://imgur.com/GlNLZsK . In my public repository I did add the .npmrc file, so that Vercel would know where to use the variable. See here: https://github.com/olavgit/crftd/blob/main/.npmrc . In my IDE it works just fine, using the .env.development.local like you instructed, but when I push my repo and Vercel tries to build, I keep getting the following error: https://imgur.com/xvKFIvG . Any idea of what is going wrong? Already checked the input of the environment variable, and it doesn't have any characters like a space that shouldn't be there.. Looking forward to your reply! Olav Link to comment Share on other sites More sharing options...
Olav Posted April 24, 2023 Share Posted April 24, 2023 Fixed it! For anyone facing similar issues, the setup listed works perfectly fine. Only thing you should change is the .npmrc file to the following: On 3/16/2023 at 11:06 PM, b1mind said: .npmrc always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=${GIT_TOKEN} Thanks to @b1mind in another post, but works like a charm. 2 Link to comment Share on other sites More sharing options...
Rodrigo Posted April 24, 2023 Share Posted April 24, 2023 Hey @Olav, Thanks for reporting back and crossing-over the info from that other post! 🥳 I'll edit the information in my previous post and update the repo so everything works as expected. Thanks again and Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now