GSAP private module + Netlify + yarn

[Jung von Matt NECKAR 1 Likes (Newbie)]

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

 

[ZachSaucier 7,152 Likes (Superhero)]

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.

[Jung von Matt NECKAR 1 Likes (Newbie)]

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\"".

[ZachSaucier 7,152 Likes (Superhero)]

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.

• Netlify instructions
• Vercel instructions

Did you follow those instructions?

[Jung von Matt NECKAR 1 Likes (Newbie)]

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 🙂

 

[Prasanna 85 Likes (Contributor)]

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?

[Jung von Matt NECKAR 1 Likes (Newbie)]

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\"".

[Prasanna 85 Likes (Contributor)]

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.

[Jung von Matt NECKAR 1 Likes (Newbie)]

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

[Jung von Matt NECKAR 1 Likes (Newbie)]

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

[ZachSaucier 7,152 Likes (Superhero)]

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.

[Jung von Matt NECKAR 1 Likes (Newbie)]

I guess so but for now I keep using the .tgz file

[Abdul Rauf 1 Likes (Newbie)]

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

[nestorbonilla 3 Likes (Newbie)]

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.  

[tailbreezy 221 Likes (Specialist)]

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.

[ZachSaucier 7,152 Likes (Superhero)]

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.

[tailbreezy 221 Likes (Specialist)]

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

[ZachSaucier 7,152 Likes (Superhero)]

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.

[nestorbonilla 3 Likes (Newbie)]

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.

[GreenSock 18,576 Likes (Superhero)]

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!

[Jung von Matt NECKAR 1 Likes (Newbie)]

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.

[GreenSock 18,576 Likes (Superhero)]

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. 

[Prasanna 85 Likes (Contributor)]

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.

[Prasanna 85 Likes (Contributor)]

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.
 

[elegantseagulls 1,443 Likes (Superhero)]

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