Jump to content
Search Community

GSAP private module + Netlify + yarn

Jung von Matt NECKAR test
Moderator Tag

Recommended Posts

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!

 

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

@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.

  • Thanks 1
Link to comment
Share on other sites

@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

 

  • Like 4
Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 7 months later...

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. 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

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

  • Like 2
  • Thanks 2
Link to comment
Share on other sites

  • 1 month later...
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! :-)

  • Like 4
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...