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!