GSAP private module + Netlify + yarn

[Chriis]

Glad it helped! 🙂 @cburrows

[JPPdesigns]

There is an open bug with yarn in which it fails to install private packages with no range... **sigh** https://github.com/yarnpkg/berry/issues/1816

 

You will also need to update your .yarnrc.yml file with the following:

npmRegistries:
  https://npm.greensock.com:
    npmAuthToken: "TOKEN_HERE"
    npmAlwaysAuth: true

npmScopes:
  gsap:
    npmRegistryServer: "https://npm.greensock.com"
    npmAuthToken: "TOKEN_HERE"
    npmAlwaysAuth: true

and then the below should work

yarn add gsap@npm:@gsap/shockingly@latest

 

 

 

 

[stectix]

On 12/22/2023 at 1:26 AM, JPPdesigns said:

There is an open bug with yarn in which it fails to install private packages with no range... **sigh** https://github.com/yarnpkg/berry/issues/1816

 

You will also need to update your .yarnrc.yml file with the following:

npmRegistries:
  https://npm.greensock.com:
    npmAuthToken: "TOKEN_HERE"
    npmAlwaysAuth: true

npmScopes:
  gsap:
    npmRegistryServer: "https://npm.greensock.com"
    npmAuthToken: "TOKEN_HERE"
    npmAlwaysAuth: true

and then the below should work

yarn add gsap@npm:@gsap/shockingly@latest

 

 

 

 

Im guessing this is related to the following error?

 

➤ YN0000: ┌ Resolution step

➤ YN0001: │ Error: gsap@npm:@gsap/business isn't supported by any available resolver

 

Still cannot install via Yarn

[stectix]

On 1/30/2023 at 9:05 AM, Chriis said:

Hi, 

 

Just want to share how I managed to deploy GSAP Shockingly to Vercel using yarn. Steps below:

1. Create a .npmrc file on your project directory that contains the following:

//registry.npmjs.org/

@gsap:registry=https://npm.greensock.com
//npm.greensock.com/:_authToken={YOUR_GENERATED_TOKEN_HERE}

2. Update your package.json file and add the GSAP dependency below then run yarn install

"@gsap/shockingly": "npm@gsap/shockingly"

The package has to be installed with the @gsap prefix to match the @gsap custom registry path defined in .npmrc (or the ENV_VARIABLE in Vercel)

 

You can also install it similar to the yarn command below. Technically, it should work the same way but I haven't tested it yet.

yarn add @gsap/shockingly gsap@npm:gsap/shockingly

 

3. Once installed, you can import GSAP via ES Modules or UMD/CommonJS. In my case, I had to import using UMD/CommonJS as I was having issues with ES Modules using Next.js.
ES Modules

import { gsap } from "@gsap/shockingly/gsap";
import { ScrollTrigger } from "@gsap/shockingly/ScrollTrigger";

UMD/CommonJS

import { gsap } from "@gsap/shockingly/dist/gsap";
import { ScrollTrigger } from "@gsap/shockingly/dist/ScrollTrigger";

Note: If your project is using Typescript, you might encounter issues about missing types. To resolve this, add this line to your project's tsconfig.json.

"files": ["node_modules/@gsap/shockingly/types/index.d.ts"]

 

4. In Vercel, go to your Project then Settings -> Environment Variables and create an environment variable for .npmrc. Example below:

Name: NPM_RC
Value: 
//registry.npmjs.org/

@gsap:registry=https://npm.greensock.com
//npm.greensock.com/:_authToken={YOUR_GENERATED_TOKEN_HERE}

 

5. Do a test deployment and if everything is set up correctly, Vercel should install GSAP and build the site without any issues.

 

This solution is specific to issues deploying to Vercel when using yarn. Also, if you have a Business license, just change all shockingly references to business.

Happy to assist anyone who's having the same issue, and if this solution works for you, please let me know

 

- Chris

Project Stack:
Next.js (Typescript) - v12.3.4

Yarn - v1.22.19
Node - v18.13.0 (I can confirm that it also works on v16 and above)

GSAP License - Shockingly

Vercel

Thanks for this update. Sadly not working for me. I wonder why this is such an issue? I have a buisness license and have never been able to use it because of this problem.

[stectix]

Dear admin/devs at Greensock. You need to make a solid fix for this Yarn issue asap! I don't wish to be too abrasive with my comment but this issue is seriously annoying. Nothing in this topic or your installation page works. Im on a pretty standard setup (macos, homebrew) and this should not be happening. I went ahead and used the zip file solution because Im sick of trying this for years with no success. Installation should be fluid and easy, allowing us devs to get to work as quickly as possible. There needs to be a fool proof guide that works for local env and popular deploy services like Vercel. Please.

[Rodrigo]

Hi @stectix,

 

Sorry to hear about the troubles. Based on your latest posts I assume that you're trying to deploy a Next app on Vercel using Yarn? Correct me if I'm wrong about this assumption.

 

I created a new Next app using Yarn and successfully installed the bonus package. Here is the repo:

https://github.com/rhernandog/next-gsap-bonus-yarn-vercel

 

Here is the live preview on Vercel (you can inspect the console in devtools to check the version of a bonus plugin):

https://next-gsap-bonus-yarn-vercel.vercel.app/

 

I installed using the shockingly package since the plugins are the same:

yarn add gsap@npm:@gsap/shockingly

Is important in this case to install the @gsap/react package before installing the bonus plugins to avoid any issues with Yarn/NPM asking for the token as well.

 

Hopefully this helps.

Happy Tweening!

[stectix]

On 4/25/2024 at 6:52 PM, Rodrigo said:

Hi @stectix,

 

Sorry to hear about the troubles. Based on your latest posts I assume that you're trying to deploy a Next app on Vercel using Yarn? Correct me if I'm wrong about this assumption.

 

I created a new Next app using Yarn and successfully installed the bonus package. Here is the repo:

https://github.com/rhernandog/next-gsap-bonus-yarn-vercel

 

Here is the live preview on Vercel (you can inspect the console in devtools to check the version of a bonus plugin):

https://next-gsap-bonus-yarn-vercel.vercel.app/

 

I installed using the shockingly package since the plugins are the same:

yarn add gsap@npm:@gsap/shockingly

Is important in this case to install the @gsap/react package before installing the bonus plugins to avoid any issues with Yarn/NPM asking for the token as well.

 

Hopefully this helps.

Happy Tweening!

Hi @Rodrigo thank you for the info. I will check these resources out now and give it a go.

[stectix]

@Rodrigo Errors:

 

yarn add gsap@npm:@gsap/shockingly

 

does not work:


 

YN0000: ┌ Resolution step

➤ YN0001: │ Error: gsap@npm:@gsap/shockingly isn't supported by any available resolver

[Rodrigo]

Hi @stectix,

 

Are you getting this error locally or during deploy?

[ynamite]

Had the same problem, the workaround with the .yarnrc.yml above did the trick.
Weird that this is still an ongoing issue +3 years later and that the installation instructions on the website don't seem to be working. Very unshockingly green my dudes.

In my case I was trying to install the latest GSAP Business locally on a mac with yarn 4.2.2.

I now have the following three files in my root dir and I'm unsure which ones or rather if all of them are actually needed to successfully install GSAP via yarn. Is it enough to just have the .yarnrc.yml file?

.npmrc
.yarnrc
.yarnrc.yml

Edited 22 hours ago by ynamite
more specific description

[stectix]

On 5/20/2024 at 6:55 PM, Rodrigo said:

Hi @stectix,

 

Are you getting this error locally or during deploy?

Hello @Rodrigo,

 

After testing it beyond the commands given, the below seems to work atm (not sure if this is sufficient?):

 

yarn add @gsap/shockingly

 

And why not yarn add gsap@npm:@gsap/business?

 

My .yarnrc.yml config didn't work at all so I killed the GSAP config in it and just went with the .npmrc config from your github repo.
 

Deployed on Vercel and all seems to be ok. I will track it to see how it holds up in dev.

 

My complete surprise was the inclusion of the React GSAP package.  When was this deployed and why is it not explicitly listed in yarn install directions?

 

This React GSAP change is relatively significant as it looks like it requires code refactoring in all animations to bring everything up to modern standards. Correct me if im wrong?

 

That said, the instruction on the GSAP site needs to be updated asap! All this tricky hidden stuff shouldn't be needed to get going with development.

[stectix]

1 hour ago, ynamite said:

Had the same problem, the workaround with the .yarnrc.yml above did the trick.
Weird that this is still an ongoing issue +3 years later and that the installation instructions on the website don't seem to be working. Very unshockingly green my dudes.

In my case I was trying to install the latest GSAP Business locally on a mac with yarn 4.2.2.

I now have the following three files in my root dir and I'm unsure which ones or rather if all of them are actually needed to successfully install GSAP via yarn. Is it enough to just have the .yarnrc.yml file?

.npmrc
.yarnrc
.yarnrc.yml

I tried that route and was met with failure. I had the same issue, and I hate having junk files/code in project.

Switched to .npmrc only and that worked but not with the business package install, the shockingly one.

 

I wholeheartedly agree that this matter and the directions need some serious cleaning up pronto. 3 years is very odd for this to remain an issue.

 

devs have enough to do....installing packages cleanly and correctly is not something we need to be stuck on, especially with the yearly cost included.

[Cassie]

Hi folks!

 

I recently updated the installation guide so I'm just trying to nail down what the issue is here as the install instructions were working. I'm sorry about how frustrating this is. We also find it incredibly frustrating, we don't have control over Yarn issues. I would love to find one solution that works for everyone but there always seem to be edge cases popping up.
 

Quote

My complete surprise was the inclusion of the React GSAP package.  When was this deployed and why is it not explicitly listed in yarn install directions?

The React package won't be included in the yarn install instructions unless you explicitly ask for it as plenty of yarn users aren't using React. You can select it on the GSAP install page if it's relevant to you though.

The useGSAP package was a recent addition to help users with animation cleanup. There's a section covering it in our docs here.
https://gsap.com/resources/React/
 

Quote

And why not yarn add gsap@npm:@gsap/business?

I assume Rodrigo was just demonstrating an install. He wasn't advising to use shockingly instead. You should use business as that's your tier. I can see why this was confusing though, sorry about that.

 

Installation 

Quote

Switched to .npmrc only and that worked but not with the business package install, the shockingly one.

I ran through the install using the instructions on the install page and your install token @stectix - you're correct that it doesn't work with a .yarnrc file, however it does work with an .npmrc file and the business package. 

 

Here's my install

 

 

The thing that confuses me is that Yarn advises to use a .yarnrc - so that should work. Tagging in @Prasanna as the resident expert, as  I'd really love to figure out why? Is it safe for us to advise Yarn users to use an .npmrc? Why is the yarnrc not working now?

 

Quote

You need to make a solid fix for this Yarn issue asap!

Quote

3 years is very odd for this to remain an issue.

I'm afraid we don't have any control over how Yarn handles private registries or package name aliases. It is incredibly frustrating though, we're with you on that.

 

This is why we suggest npm or the .zip download if you're struggling, those are solutions that work seamlessly. We understand that not everyone can just switch over though. I'll do what I can to try and make this easier, I wish there was a 'one size fits all' solution, but it seems like whatever we suggest, Yarn is throwing curveballs out.

 

We can maybe start by suggesting that people use an .npmrc file if @Prasanna doesn't see an issue with that?

 

Apologies again, I'm honestly just as frustrated as you all with this endless Yarn saga.

[Cassie]

Quote

This React GSAP change is relatively significant as it looks like it requires code refactoring in all animations to bring everything up to modern standards. Correct me if im wrong?

If you're using React 18 and above, React made some changes to how they handle rendering

 

https://react.dev/reference/react/StrictMode

Your components will re-render an extra time to find bugs caused by impure rendering.
Your components will re-run Effects an extra time to find bugs caused by missing Effect cleanup.

This re-rendering pattern made animation cleanup much more important for React devs so we created a hook to help. This isn't us trying to make things more complicated, this is us extending a helping hand due to decision outside of our control from another library.

Hope this helps to clarify a little

[ynamite]

@Cassie in my case I was using .npmrc with npm:@gsap/business and yarn 1.22, which was working fine for quite some time.

Today I decided to upgrade yarn to 4.2.2, that's when the .npmrc file stopped working for me and hence why I discovered this thread.

Now I am using npm:@gsap/shockingly@latest with yarnrc.yml which seems to work.
But I'll do some additional testing and see if the business version works with .npmrc or one of the other variants.

[ynamite]

@Cassie my findings are as follows:

In my root I still have .npmrc and .yarnrc with the following content – with my auth token substituted in ***:

always-auth=true
//npm.greensock.com/:_authToken=***
@gsap:registry=https://npm.greensock.com

and a .yarnrc.yml file with the following content:

nodeLinker: node-modules
npmRegistries:
  https://npm.greensock.com:
    npmAuthToken: '***'
    npmAlwaysAuth: true

npmScopes:
  gsap:
    npmRegistryServer: 'https://npm.greensock.com'
    npmAuthToken: '***'
    npmAlwaysAuth: true

1. simply replacing npm:@gsap/shockingly@latest with npm:@gsap/business@latest in my package.json and running yarn install again afterwards works.
   Replacing without removing it from the package.json first and running yarn install again afterwards, seems to work, no matter if .npmrc and/or.yarnrcand/or .yarnrc.ymlare present. It seems crucial to first remove gsap from the package.json and running yarn install again to truly remove it, before re-adding it.
2. removing both .npmrc and/or.yarnrc, removing npm:@gsap/business@latest, running yarn install , re-adding npm:@gsap/business@latest and running yarn install again works.
3. removing only .yarnrc.yml, removing npm:@gsap/business@latest, running yarn install , re-adding npm:@gsap/business@latest and running yarn install again yields – regardless of whether the other two dot files are present:

   ➤ YN0035: │ gsap@npm:@gsap/business@latest: Package not found
   ➤ YN0035: │   Response Code: 404 (Not Found)
   ➤ YN0035: │   Request Method: GET
   ➤ YN0035: │   Request URL: https://registry.yarnpkg.com/@gsap%2fbusiness

4. same as 3. but replacing npm:@gsap/business@latest with npm:@gsap/business yields:

   ➤ YN0001: │ Error: gsap@npm:@gsap/business isn't supported by any available resolver

    

So to summarize:
npm:@gsap/business@latest or npm:@gsap/shockingly@latest both work with the .yarnrc.yml file present, everything else does not – at least not on my system. The suffix "@latest" seems required. It does not work without it.

[Cassie]

Thanks for the info! I updated my project settings to yarn berry for testing and managed to get a build working with the following.

YARN BERRY - v4.2.2
 

yarnrc.yml

yarnPath: .yarn/releases/yarn-4.2.2.cjs  
unsafeHttpWhitelist:
  - "npm.greensock.com"

npmScopes:
  gsap:
    npmRegistryServer: "https://npm.greensock.com"
    npmAuthToken: <YOUR TOKEN>

install command

yarn add @gsap/business

Yarn Classic

With previous versions of Yarn everything seems to be working with .npmrc and the more explicit install command on the install page

.npmrc (not sure why .yarnrc isn't working)

always-auth=true
//npm.greensock.com/:_authToken=<YOUR TOKEN>
@gsap:registry=https://npm.greensock.com/

install command

yarn add gsap@npm:@gsap/business

@Prasanna  - do these look like decent recommendations? I'm going to add a Yarn Classic vs Yarn Berry tab on the install page if so.

[Cassie]

super helpful thanks @ynamite

[ynamite]

@cassie likewise, thank you! Your solution worked for me, though I had to remove the first line of your .yarnrc.yml.

My .yarnrc.yml currently looks like this:

unsafeHttpWhitelist:
  - "npm.greensock.com"

npmScopes:
  gsap:
    npmRegistryServer: "https://npm.greensock.com"
    npmAuthToken: <YOUR TOKEN>

Happy to help!

[Cassie]

Ah yeah, that's because I just installed yarn berry for that particular project. That would change depending on the users setup

I'm feeling *tentatively* good about this then.... I'll update the docs (and wait for the new edge cases to start flooding in 🫠)

unsafeHttpWhitelist:
  - "npm.greensock.com"

npmScopes:
  gsap:
    npmRegistryServer: "https://npm.greensock.com"
    npmAuthToken: <YOUR TOKEN>