Jump to content
Search Community

GSAP private module + Netlify + yarn

Jung von Matt NECKAR test
Moderator Tag

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

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

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

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

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

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