GSAP private module + Netlify + yarn

[Prasanna 80 Likes (Contributor)]

Hi @Cassie, thanks. I created this repo for installing via yarn: https://github.com/prasannamestha/gsap-netlify-yarn

 

Only difference between using npm and yarn is that yarn needs an explicit install for `@gsap/shockingly`

 

Let me know how it goes for you

 

Prasanna

[Cassie 5,080 Likes (Superhero)]

Lift off! Fantastic. I'll update the docs.

 

@elegantseagulls let me know how you get on.

 

[Hache 3 Likes (Newbie)]

Hi, is there a way to deploy to vercel using yarn? Tried the netlify way on vercel(using a env variable for my token), couldn't make it work, I get a Request failed: 403 forbidden . Thanks.

 

Finally deployed to vercel with yarn following @Prasanna instructions on page 1. 
Just a tip, don't add the .yarn/releases folder to the .gitignore(add the cache though, as it's quite a few mb), as then the build will fail.

 

Cheers!

 

[elegantseagulls 1,409 Likes (Superhero)]

19 hours ago, Cassie said:

@elegantseagulls let me know how you get on.

Will try this Monday!

[Rodrigo 5,051 Likes (Superhero)]

@Prasanna Someone at work actually uses Ubuntu and it's having issues with this. When running yarn add @gsap/shockingly it gives the following error:

➤ YN0027: @gsap/shockingly@unknown can't be resolved to a satisfying range
➤ YN0035: The remote server failed to provide the requested resource
➤ YN0035:   Response Code: 404 (Not Found)
➤ YN0035:   Request Method: GET
➤ YN0035:   Request URL: https://registry.yarnpkg.com/@gsap%2fshockingly

Also a message to my fellow GreenSockers, running this yarn add gsap@npm:@gsap/shockingly, result in this error as well in Ubuntu:

➤ YN0000: ┌ Resolution step
➤ YN0001: │ Error: gsap@npm:@gsap/shockingly isn't supported by any available resolver
    at pd.getResolverByDescriptor (/home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:432:5658)
    at pd.bindDescriptor (/home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:432:5047)
    at I (/home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:441:6932)
    at async Promise.all (index 0)
    at async Ke.resolveEverything (/home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:441:8197)
    at async /home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:444:2138
    at async Fe.startTimerPromise (/home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:412:3730)
    at async Ke.install (/home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:444:2077)
    at async /home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:449:122
    at async Function.start (/home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:412:2287)
➤ YN0000: └ Completed
➤ YN0000: Failed with errors in 0s 7ms

I don't know if this is related to the version of yarn that He has installed in his machine (I believe is 3.1.1), but while installing stuff in linux is a bit different that win/mac the resulting installed resource should be the same.

 

Also is worth noticing that we're not using netlify for this, we're deploying on digital ocean using a docker image. For now we'll use the .tgz file and since is a private repo, there isn't a lot of issues with it, but it would be great to have a notion of what's the issue here.

 

I did a search in the issues at Yarn's repo and didn't found anything so I'll create a ticket there and give feedback regarding this.

 

Cassie, Jack. I don't know if this is the right place for this, since my issue is not related to Next and Netlify, if you want I can create a new thread in the forums specific for this.

 

Best,

Rodrigo.

[GreenSock 18,235 Likes (Superhero)]

Thanks @Rodrigo. Hopefully @Prasanna will have some feedback - all I know is that Yarn has been problematic for a long time with various known bugs (on their end). We typically recommend switching to NPM which has broad support and appears to be better maintained. 🤷‍♂️

[Prasanna 80 Likes (Contributor)]

@Rodrigo thanks for reporting. It seems like you might have missed configuring the scoped registry on the machine. This can be resolved by running these commands:
 

$ npm config set @gsap:registry https://npm.greensock.com/
$ npm config set //npm.greensock.com/:_authToken xxxx-xxxx-xxxx-xxxx
$ yarn add @gsap/shockingly gsap@npm:@gsap/shockingly

 

Running the above commands should help. If you still face issues then I can help you by providing a sample yarn configuration file (for yarn berry).

Here are some additional resources that could be helpful:

https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-digitalocean-aws-etc
https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-netlify

 

[elegantseagulls 1,409 Likes (Superhero)]

On 12/18/2021 at 11:20 PM, elegantseagulls said:

Will try this Monday!

We were able to get this working with our setup (but forgot to respond here right away). Thanks for all your insights and help @Prasanna!

[Rodrigo 5,051 Likes (Superhero)]

@Prasanna Thanks for the follow up.

 

Actually we already have updated the .npmrc file and the global configs. The global .npmrc file looks like this:

registry=https://npm.greensock.com/
@gsap:registry=https://npm.greensock.com
//npm.greensock.com/:_authToken=<token>

As I mentioned this is happening on the local dev environment for a Next app on Ubuntu 20.04 using Yarn 3.1.1, on a Win 10 machine using Yarn 1.22.5 works as expected.

 

Over the weekend I took the time to install Ubuntu 20.04 here at home and I'm seeing the same issue. This is the result:

rodrigo@rodrigo-desktop:~/Web Apps/GSAP/yarn-bonus$ yarn add @gsap/shockingly gsap@npm:@gsap/shockingly
➤ YN0027: @gsap/shockingly@unknown can't be resolved to a satisfying range
➤ YN0035: The remote server failed to provide the requested resource
➤ YN0035:   Response Code: 404 (Not Found)
➤ YN0035:   Request Method: GET
➤ YN0035:   Request URL: https://registry.yarnpkg.com/@gsap%2fshockingly

➤ Errors happened when preparing the environment required to run this command.

I created a simple project using yarn init without any dependencies and the results are the same. No issues in Win 10/Yarn 1.22.5 and the same error in Ubuntu 20.04/Yarn 3.1.1.

 

If I have time I'll see if I can remove yarn and install the latest 1.x version (which is no longer supported though) and see if it works with that.

 

Finally I created an issue in Yarn, but it was marked as unreproducible by the bot so I don't know what amount of attention it'll attract:

https://github.com/yarnpkg/berry/issues/4072

 

Best,

Rodrigo.

[Prasanna 80 Likes (Contributor)]

@Rodrigo It seems like the greensock registry was not set for the computer. How about we debug this over google meet?

[Finabluma 1 Likes (Newbie)]

Hi, I have been trying to upload the package to vercel without succeed. I decided to report the issue in this forum because I've read all the entries and tried everything but no result.

 

Here's my .npmrc

 

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

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

 

and the last log I got from vercel...

 

[log] Downloading files...
21:30:38.159	[log] Working directory: /vercel/path0
21:30:38.164	[log] Using npm
21:30:38.164	[log] Found NPM_AUTH_TOKEN or NPM_TOKEN in environment; creating .npmrc
21:30:38.167	[info] Prepare build took: 6.896855 ms
21:30:38.167	[log] ----------------- Install devDependencies -----------------
21:30:42.065	npm ERR! code E404
21:30:42.072	npm ERR! 404 Not Found - GET https://registry.npmjs.org/@gsap%2fshockingly - Not found
21:30:42.072	npm ERR! 404
21:30:42.072	npm ERR! 404 '@gsap/shockingly@^3.9.1' is not in the npm registry.
21:30:42.072	npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
21:30:42.072	npm ERR! 404 It was specified as a dependency of 'path0'
21:30:42.073	npm ERR! 404
21:30:42.073	npm ERR! 404 Note that you can also install from a
21:30:42.073	npm ERR! 404 tarball, folder, http url, or git url.

 

best regards!

[Finabluma 1 Likes (Newbie)]

1 minute ago, Finabluma said:

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@gsap%2fshockingly - Not found

The url is pointing to nowhere ... I wonder if this could be related with the issue ...

[GreenSock 18,235 Likes (Superhero)]

It sounds like you never set the registry to point to npm.greensock.com

 

Check out this helpful post from Prasanna's team: https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-vercel

[marketing-dev 1 Likes (Newbie)]

Hey @Rodrigo,

 

Were you able to resolve this issue with yarn? I'm getting the same 404 error. 

 

my `.npmrc` looks like the recommended config

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

 

The command I've been trying to run is `yarn add @gsap/business@^3.11.1 gsap@npm:@gsap/business@^3.11.3`

 

➤ Errors happened when preparing the environment required to run this command.
➜  web-app git:(installGsap) ✗ yarn add @gsap/business gsap@npm:@gsap/business@3.11.3 
➤ YN0027: @gsap/business@unknown can't be resolved to a satisfying range
➤ YN0035: The remote server failed to provide the requested resource
➤ YN0035:   Response Code: 404 (Not Found)
➤ YN0035:   Request Method: GET
➤ YN0035:   Request URL: https://registry.yarnpkg.com/@gsap%2fbusiness

It saying `@gsap/business@unknown` which means it can't resolve the  package version i guess. 

[marketing-dev 1 Likes (Newbie)]

I'm also trying the .yarnrc.yml approach because the ideal state is putting the authtoken in our .env file. 

  gsap:
    npmRegistryServer: "https://npm.greensock.com"
    npmAuthToken: ${process.env.GSAP_AUTH}

Then running this command  yarn add @gsap/business@^3.11.1 gsap@npm:@gsap/business@^3.11.3

 

I get this response:

 

➜  web-app git:(installGsap) ✗ yarn add @gsap/business@^3.11.1 gsap@npm:@gsap/business@^3.11.3
➤ YN0000: ┌ Resolution step
➤ YN0035: │ gsap@npm:@gsap/business@^3.11.3: @gsap/business@npm:^3.11.1: The remote server failed to provide the requested resource
➤ YN0035: │   Response Code: 403 (Forbidden)
➤ YN0035: │   Request Method: GET
➤ YN0035: │   Request URL: https://npm.greensock.com/@gsap%2fbusiness
➤ YN0000: └ Completed in 0s 706ms
➤ YN0000: Failed with errors in 0s 709ms

 

[GreenSock 18,235 Likes (Superhero)]

@marketing-dev have you tried just this?: 

 

yarn add @gsap/business gsap@npm:@gsap/business

I'm also curious why you were originally trying to use mis-matched versions (3.11.1 and 3.11.3)

[marketing-dev 1 Likes (Newbie)]

12 hours ago, GreenSock said:

@marketing-dev have you tried just this?: 

 

yarn add @gsap/business gsap@npm:@gsap/business

I'm also curious why you were originally trying to use mis-matched versions (3.11.1 and 3.11.3)

 

OOPS that was a typo! but same outcome.... If I attempt to install without specifying the package version I get this error
 

marketing git:(installGsap) ✗ yarn add @gsap/business gsap@npm:@gsap/business
➤ YN0000: ┌ Resolution step
➤ YN0001: │ Error: gsap@npm:@gsap/business isn't supported by any available resolver

 

[Rodrigo 5,051 Likes (Superhero)]

Hi,

 

I created this repo which is being deployed correctly on both Netlify and Vercel:

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

 

The flow I used was the following:

1. Create a Next app with npx
2. Create an .npmrc file with this:

   registry=https://npm.greensock.com
   @gsap:registry=https://npm.greensock.com
   //npm.greensock.com/:_authToken=NPM_TOKEN
   # //npm.greensock.com/:_authToken=${NPM_TOKEN}

3. Create a .env.development.local file and add your token there. IMPORTANT ADD THIS FILE TO .gitignore:

   NPM_TOKEN=your-token-here

4. Run yarn add @gsap/business gsap@npm:@gsap/business (I used shockingly but there shouldn't be any difference)
5. Run yarn dev and everything should be OK in your local environment.
6. Before pushing to your repo uncomment the final line in the .npmrc file and comment out the third line. For some reason in the local environment this doesn't work ${NPM_TOKEN}, but I don't know if in the build environments in Vercel and Netlify it works without the dollar sign and curly brackets.
7. Push to your repo
8. Undo the changes in the .npmrc file and stop tracking it on git. Most likely there is no need to push that file again and reject any pull/merge request that makes changes to it, unless is completely necessary (I'm not an expert on git, so there could be a better way to do this):

   git rm --cached .npmrc

9. Create in the deploy settings an environment variable called NPM_TOKEN and add your token there.
10. Deploy

As you can see there is nothing fancy there, just importing ScrollTrigger and ScrollSmoother to check that everything works in the deployment stage.

 

Let us know if you have any question.

 

Happy Tweening!

[Prasanna 80 Likes (Contributor)]

5 hours ago, marketing-dev said:

 

OOPS that was a typo! but same outcome.... If I attempt to install without specifying the package version I get this error
 

marketing git:(installGsap) ✗ yarn add @gsap/business gsap@npm:@gsap/business
➤ YN0000: ┌ Resolution step
➤ YN0001: │ Error: gsap@npm:@gsap/business isn't supported by any available resolver

 

Can you try running: `$yarn add @gsap/business`?  (just one package to check if installation succeeds)

It is weird that yarn gives out random errors. But if the above command runs successfully, then we could narrow down the problem

[marketing-dev 1 Likes (Newbie)]

7 hours ago, Rodrigo said:

The flow I used was the following:

 

Hey @Rodrigo and @Prasanna,

I really appreciate your assistance. Thank you for providing these steps - unfortunately I'm still getting the following error from trying to install from .npmrc instead of .yarnrc.yml

PS the yarn version i'm using is 3.1.1 and node is v18.9.1 (VSCODE uses this node version from the terminal... i don't know why)

➜  web-app git:(development) ✗ yarn add @gsap/business  gsap@npm:@gsap/business
➤ YN0027: @gsap/business@unknown can't be resolved to a satisfying range
➤ YN0035: The remote server failed to provide the requested resource
➤ YN0035:   Response Code: 404 (Not Found)
➤ YN0035:   Request Method: GET
➤ YN0035:   Request URL: https://registry.yarnpkg.com/@gsap%2fbusiness

 

Here's what i've tried:

1.  In the .npmrc file i've attempted 3 different ways to provide the auth token and all have failed
   1.  Without interpolation: //npm.greensock.com/:_authToken=NPM_TOKEN
   2. With interpolation: //npm.greensock.com/:_authToken=${NPM_TOKEN}
   3. Using my auth token directly without sourcing from the local env file: //npm.greensock.com/:_authToken='XXXXXXX-XXXXX-XXXXXXXX'
2. I've also tried adding the packages with the version numbers with without 
   1. yarn add @gsap/business  gsap@npm:@gsap/business
   2. yarn add @gsap/business@^3.11.3  gsap@npm:@gsap/business@^3.11.3

 

 

Now I have had success with adding to the .yarnrc.yml file by adding the auth token directly to the file like so:

  gsap:
    npmRegistryServer: "https://npm.greensock.com"
    npmAuthToken: "XXXXX-XXXXXX-XXXXX"

However, this is not a viable solution because we need to encrypt the auth token in git-secrets. Apparently you can use environment variables in a .yarnrc.yml file like so - but when i try it I get a 403 error (authorization error) which is different so I presume the .yarnrc.yml file is not reading the env variable correctly; like so

  gsap:
    npmRegistryServer: "https://npm.greensock.com"
    npmAuthToken: ${process.env.GSAP_AUTH}
    # i've also tried representing the auth token in the following ways
    # - "${process.env.GSAP_AUTH}"
    # - process.env.GSAP_AUTH

The response i get from this is :

➜  web-app git:(development) ✗ yarn add @gsap/business  gsap@npm:@gsap/business
➤ YN0027: @gsap/business@unknown can't be resolved to a satisfying range
➤ YN0035: The remote server failed to provide the requested resource
➤ YN0035:   Response Code: 403 (Forbidden)
➤ YN0035:   Request Method: GET
➤ YN0035:   Request URL: https://npm.greensock.com/@gsap%2fbusiness

 

So to summarize - i've been lucky enough to get the packages added via .yarnrc.yml by playing the auth token directly in the file - but this is not a suitable solution because all authorization tokens should be encrypted.

 

UPDATE:

I've tried installing with a different node version (v16.17). and I get the following error

(env-16.17.0) ➜  web-app git:(development) ✗ yarn add @gsap/business  gsap@npm:@gsap/business
Internal Error: Unable to deserialize cloned data due to invalid or unsupported version.

 

[Rodrigo 5,051 Likes (Superhero)]

Hi,

 

Sorry to hear that you're still having issues.

 

Honestly I kind of reached my limit in terms of the assistance I can provide regarding this situation, sorry.

 

Have you tried the approach @Prasanna has in this repo:
https://github.com/prasannamestha/gsap-netlify-yarn

 

Also regarding this:

4 minutes ago, marketing-dev said:

UPDATE:

I've tried installing with a different node version (v16.17). and I get the following error

(env-16.17.0) ➜  web-app git:(development) ✗ yarn add @gsap/business  gsap@npm:@gsap/business
Internal Error: Unable to deserialize cloned data due to invalid or unsupported version.

Most likely the error comes from have the original installation with a different version of Node, NPM and/or Yarn.

 

Could you try cloning my repo and run a fresh start with your token and see if that works? Remember that the repo is no longer tracking the .npmrc file so create that one and the .env.development.local before installing anything.

 

I previously bumped Prasanna about this, so He'll get the notification and hopefully help us solve this.

 

Regardless, please let me know if installing and deploying my repo works or not.

[marketing-dev 1 Likes (Newbie)]

Hey @Rodrigo, nah I'm so grateful for your help. I realize i'm going to need to keep messing with it.

 

It's definitely possible that we might have to uninstall the free version of greensock first.  Our tech stack is rather complicated so getting this work is tedious trial and error. I've been working on this casually in order to save my sanity 🤯 

 

Anyway, thanks again for your time,  I appreciate it!

[Rodrigo 5,051 Likes (Superhero)]

Hi @marketing-dev,

 

Don't mention it!! 👍

 

Just one request, when you solve, if you have the time, please let us know how it was resolved, as it'll definitely help other users that could run into a similar issue.

 

Let us know if you have any other question.

 

Happy Tweening!

[Chriis 10 Likes (Newbie)]

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

[cburrows 4 Likes (Newbie)]

On 1/30/2023 at 8: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

Thank you so so much! This worked perfectly! I've been scratching my head for a while trying to get it working. Very happy camper, here!