Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Jung von Matt NECKAR

GSAP private module + Netlify + yarn

Recommended Posts

Hi,

I'm using the GSAP bonus module on Netlify with yarn but the authentication is not working properly.

Response during install: \"403 Forbidden\"".

The token is setup via environment variable on Netlify.

 

When I switched from yarn to npm it suddenly worked as expected.

 

Are there any special requirements when using yarn ?

 

Best regards,

a GSAP Fan

 

Link to comment
Share on other sites

Hello and welcome to the GreenSock forums.

 

Did you make sure to follow the latest Yarn installation instructions found on your account dashboard

 

If so, do the instructions work locally but not on Netlify itself? Any other info that you can give us about the issue would be appreciated.

Link to comment
Share on other sites

Yarn worked locally but not on Netlify, so I tried NPM as alternative and that worked. 

The full error I got was:

1:39:47 PM: error An unexpected error occurred: "https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.6.0.tgz: Request failed \"403 Forbidden\"".

Link to comment
Share on other sites

That sounds like an authentication issue. In the CI/CD tab of the private registry instructions on your account dashboard, it says:

Quote

However in some cases (like if you're using Netlify or Vercel), you might need to create the token or specify the registry as environment variables instead.

Did you follow those instructions?

Link to comment
Share on other sites

yes, I followed the support guide and setup the token as environment variable. I created the .npmrc file by hand.

Like I said with NPM it worked this way, so I guess it must be a configuration problem with Yarn. (Eventually I will try a preinstall script)

In the end not really a GSAP problem, but I thought maybe someone else already solved this 🙂

 

Link to comment
Share on other sites

You might wanna add a .yarnrc in your project that you're deploying to netlify. If that doesn't work could you share the yarn version that you're using on Netlify & the error message?

  • Like 1
Link to comment
Share on other sites

tried the .yarnrc without success.

 

yarn version: v1.22.4

 

error: 5:03:02 PM: error An unexpected error occurred: "https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.6.0.tgz: Request failed \"403 Forbidden\"".

Link to comment
Share on other sites

Well, that's very unlikely to happen. Following these steps always provide with successful installations:

1. Delete yarn.lock file from the project

2. Create .npmrc file in the project's root directory and add the following lines:

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

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

3. Ensure that the package.json file does not contain `gsap` under dependencies/devDependencies

4. Run: $ yarn add gsap@npm:@gsap/shockingly
5. Push the code - if the ENV variables on netlify are configured properly, the installation should be good.

  • Like 2
Link to comment
Share on other sites

I tried it again several times with your instructions. Locally everything works but not on Netlify.

error An unexpected error occurred: "https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.6.0.tgz: Request failed \"403 Forbidden\"".

Also tried a different Yarn version (v1.13.0) without success. Then created the .npmrc file by using a preinstall script. Same error stays.

I cleaned Netlify build cache serveral times during my attempts.

For now I give up. I'm pretty sure there's something going wrong inside the Netlify build container.

 

Cheers

Link to comment
Share on other sites

Now I'm confused. Netlify says:

"The issue is specifically related to the npm package @gsap/shockingly, version 3.6.0. It looks like that version is not available. You may need to check Green Sock to find out which version would work better. "

Link to comment
Share on other sites

Hey Jung. Version 3.6 is available. It has to be a configuration issue in your environment. 

 

It'd likely be easier to configurate if you use NPM instead of Yarn.

  • Like 1
Link to comment
Share on other sites

I am having the exact same issue. Had to switch to npm 😢

  • Like 1
Link to comment
Share on other sites

Hello group,

 

Is there any solution to the problem with gsap and Netlify?

 

I've tried all the solutions here and none of them works. I'm using Gatsby (on local it works perfect) and trying to publish it to Netlify, but I'm always getting the message:

error An unexpected error occurred: "https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.6.0.tgz: Request failed \"403 Forbidden\"".

 

I've seen this issue was mentioned since the beginning of the month, but there are just workarounds, not a definitive solution. :( 

Link to comment
Share on other sites

I am constantly pushing my demos to netlify.

Haven't done any production builds yet, but I don't see why it should be any different.

 

I just npm install the tarball and let webpack handle the rest.

Possibly missing out on the fact that gsap is already cached on people's machines, would welcome another better way if you anyone knows. Was thinking of cdn the core and just install the extra modules for chunking.

Link to comment
Share on other sites

16 minutes ago, tailbreezy said:

I just npm install the tarball and let webpack handle the rest.

The users in this thread are trying to use our private registry.

Link to comment
Share on other sites

I know, just wonder what are the benefits of using the private repo.

Link to comment
Share on other sites

2 minutes ago, tailbreezy said:

wonder what are the benefits of using the private repo

The biggest reasons why users might prefer this method are

  • Easier version updates.
  • Easier for teams getting things working locally.
  • Installing via the command line and not having to open up the web browser is often preferred by module users.
  • Like 1
Link to comment
Share on other sites

Hello group,

 

Ok, I found a different approach that worked for me:

  1. Download the gsap zip file from https://greensock.com/docs/v3/Installation, unzip the file and move gsap-bonus.tgz to the root of your project.
  2. In your package.json file replace gsap by "gsap": "./gsap-bonus.tgz"
  3. Verify your .gitignore doesn't have tgz files.
  4. Add a Netlify environment variable called YARN_FLAGS with the value --skip-integrity-check
  5. Clean cache and deploy.
  6. Ready.

I hope this to be helpful.

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

6 hours ago, tailbreezy said:

I know, just wonder what are the benefits of using the private repo.

By far the biggest reason is so that they can access the bonus plugins from their membership which aren't available from the regular NPM registry or CDN.

 

@nestorbonilla thanks for sharing your solution!

  • Like 1
Link to comment
Share on other sites

On 2/21/2021 at 1:04 AM, nestorbonilla said:

Hello group,

 

Ok, I found a different approach that worked for me:

  1. Download the gsap zip file from https://greensock.com/docs/v3/Installation, unzip the file and move gsap-bonus.tgz to the root of your project.
  2. In your package.json file replace gsap by "gsap": "./gsap-bonus.tgz"
  3. Verify your .gitignore doesn't have tgz files.
  4. Add a Netlify environment variable called YARN_FLAGS with the value --skip-integrity-check
  5. Clean cache and deploy.
  6. Ready.

I hope this to be helpful.

this is working for me as well, but this way its not so easy to update to the latest version.

Link to comment
Share on other sites

For the record, another customer discovered that due to some issues with Yarn (some of which are detailed at https://github.com/yarnpkg/yarn/issues/4451), deleting the yarn.lock file worked for him. And make sure you've got the registry set in the npmrc file, like: 

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

(Obviously put YOUR unique token in the <token> spot)

 

That should fix the issue with yarn & netlify but it's more of a workaround.

 

Overall it seems much more reliable to use NPM instead of Yarn, though. 

  • Like 3
Link to comment
Share on other sites

There seems to be a problem with yarn and package aliases (More info here: https://github.com/yarnpkg/yarn/issues/8584)

 

So, if you really need to deploy with yarn to netlify/vercel then you need to try either of these workarounds:

1. Delete yarn.lock file from the project and deploy

or

2. add registry=https://npm.greensock.com/ to the npmrc file of the project. Note that this will fetch all packages from greensock private registry.

or

3. Do not use package name alias. Install the package using `$ yarn add @gsap/shockingly` and use it as `import gsap from `@gsap/shockingly`

 

Feel free to comment on the above github issue so that the maintainers of yarn releases a bugfix soon.

  • Like 2
Link to comment
Share on other sites

UPDATE: This issue seems to have been solved in yarn berry. Here's how you could use it the package in yarn berry:

 

Create a .yarnrc.yml file in your project root and add the following:

nodeLinker: node-modules
npmScopes:
  gsap:
    npmRegistryServer: "https://npm.greensock.com"
    npmAlwaysAuth: true
npmRegistries:
  //npm.greensock.com:
    npmAlwaysAuth: true
    npmAuthToken: "<your-token-here>"

 

Then run the following commands in the terminal:

$ yarn set version berry
$ yarn add gsap@npm:@gsap/shockingly@*

You might have to delete the existing yarn.lock file to support yarn berry.
 

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

  • 2 months later...

I'm having this issue as well, but cannot upgrade to berry due to other dev reqs. Anyone else find other work-arounds?

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