Jump to content
Search Community

Installing shockingly green with yarn

web_roll test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi all,

Wondering if I'm doing something wrong when installing Shockingly reen with Yarn because all my packages are now installed via npm.greensock.com. E.g.
 


"@babel/preset-flow@^7.0.0":
  version "7.12.1"
  resolved "http://npm.greensock.com/@babel%2fpreset-flow/-/preset-flow-7.12.1.tgz#1a81d376c5a9549e75352a3888f8c273455ae940"

Is there some way of adding some scope like @gsap so that other packages can be installed from elsewhere? I can see that there is when using NPM, but I need to use Yarn for this project.

Btw, everything is actually working here, but want to be able to set a registry in .yarnrc for just GSAP if possible.


Cheers

Link to comment
Share on other sites

Hey @ZachSaucier,

Thanks for your quick response.

Yes I followed instructions. I'm using v1.22.10 ... Like I say, everything is working but I'd like to be able to install the rest of my packages from the regular registry.

I'm also using Font Awesome in this project which is working correctly using scope. Looking at the installed gsap package, I should be able to install with Yarn like on your NPM instructions with scope right? I.e. yarn add @gsap/shockingly

Here is my set up:

.npmrc (TOKEN is replaced with my token)

always-auth=true
//npm.greensock.com/:_authToken=TOKEN

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=FONTAWESOMETOKEN

.yarnrc

registry "https://npm.greensock.com/"


Some example package installs from yarn.lock (Some secrets are replaced with ...)

"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.11":
  version "7.12.11"
  resolved "http://npm.greensock.com/@babel%2fcode-frame/-/code-frame-7.12.11.tgz#...
  integrity sha512-...
  dependencies:
    "@babel/highlight" "^7.10.4"

gsap@^3.5.1:
  version "3.5.1"
  resolved "http://npm.greensock.com/@gsap%2fshockingly/-/gsap-3.5.1.tgz#...
  integrity sha512-...

"@fortawesome/fontawesome-pro@^5.13.0":
  version "5.15.1"
  resolved "https://npm.fontawesome.com/@fortawesome/fontawesome-pro/-/5.15.1/fontawesome-pro-5.15.1.tgz#...
  integrity sha512-...

 

Link to comment
Share on other sites

I was able to install other packages correctly by removing the line in the .yarnrc and adding a scoped registry URL in the .npmrc (following the same format as the fontawesome stuff):

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

Edit: I didn't test enough, this doesn't actually work.

Link to comment
Share on other sites

When I do that, gsap is installed like this:

 
gsap@^3.5.1:
  version "3.5.1"
  resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.5.1.tgz#...
  integrity sha512-...

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

I'm not too experienced with using different registry's like this. I know it's probably a Yarn thing rather than Greensock, but the instructions don't seem to work. Is there anything else I could try?

Link to comment
Share on other sites

On 1/10/2021 at 5:31 AM, web_roll said:

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

Ya, that's what I meant :) Sorry about that. 

 

On 1/10/2021 at 5:31 AM, web_roll said:

I'm not too experienced with using different registry's like this.

We aren't either :) You might be the first person that's tried to use Yarn and GSAP's private NPM registry together on an actual project. NPM has more features and is more maintained so most people use it or something else. 

 

The only way I could get it to work with Yarn is by explicitly scoping GSAP to our scoped package during the install. You still need to put the authorization token in your .npmrc file:

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

Where TOKEN is your private token viewable on your account dashboard.

 

Then you should be able to install via:

yarn add gsap@npm:@gsap/business

where business is either business, shockingly, simply, or member depending on your Club GreenSock membership status.

 

Let me know if this works for you. If it does, I'll update the docs.

Link to comment
Share on other sites

Thanks for all your help so far @ZachSaucier but it's still not working unfortunately 😟

I've tried as many combinations of things that I can think of throughout all this... Here is some of what I just tried (Ran yarn cache clean in between each attempt just in case).

1. Trivial... But tried switching the order of these lines in .npmrc like my Font Awesome example above.

13 hours ago, ZachSaucier said:

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


2. Installing with & without the suggested .yarnrc file:

On 1/9/2021 at 8:59 AM, web_roll said:

registry "https://npm.greensock.com/"


3. Attempting to install yarn add gsap@npm:@gsap/shockinglyyarn add gsap@npm:@gsap/simply and yarn add gsap@npm:@gsap/member ... just in case. Like I say, I've got the shockingly account. I get the same response for each of these attempts:

tomwebroll@Toms-iMac site % yarn add gsap@npm:@gsap/shockingly
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error An unexpected error occurred: "http://npm.greensock.com/@gsap%2fshockingly/-/gsap-3.6.0.tgz: Request failed \"403 Forbidden\"".
info If you think this is a bug, please open a bug report with the information provided in "/Users/tomwebroll/Sites/site/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

4. I want to get this working at a project level in a env variable, but just for sanity reasons I've also tried all this at a global level too in my root .npmrc and .yarnrc files.

 

13 hours ago, ZachSaucier said:

NPM has more features and is more maintained so most people use it or something else. 


I know what you are saying about NPM & I might need to use it here. I guess I'm just using Yarn in this particular project out of habit & stubbornness! I like the cleaner UI, it seems faster, and we've used https://classic.yarnpkg.com/en/docs/workspaces/ feature in the past.

Because Font Awesome is working for me using scope with Yarn, is it worth looking at how? After searching for them on https://yarnpkg.com/?q=fortawe&p=1, all their packages are prefixed with scope & yours isn't https://yarnpkg.com/?q=gsap&p=1. Could this be the problem?

Link to comment
Share on other sites

On 1/12/2021 at 7:48 PM, web_roll said:

403 Forbidden

That means that either

  1. Your private token is not being passed properly or
  2. You're requesting a package above your own level.

Can you please try creating a new, empty Yarn project (new directory -> yarn init) and following my instructions below?

 

Open your .npmrc (either the one at ~/.npmrc or a local one for that project in which case you'd create it) and only include the following (replacing the TOKEN with your token - you can copy it from the NPM section of your account dashboard😞

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

Then in your terminal add the packages you need (loading GSAP in the special way):

$ yarn add gsap@npm:@gsap/shockingly
$ yarn add code-frame
...

Then you can check where the packages are coming from by checking your yarn.lock file.

 

I checked again and it works for me. If it doesn't work, please share what error(s) you're getting. 

Link to comment
Share on other sites

Apologies in advance for the lengthy post but here are some steps I just took in my attempts to get it working as per what worked for you @ZachSaucier. I'm completely stumped as to how you got it working after trying again today.
 

Initialised yarn in a new folder using yarn v1.22.10

tomwebroll@Toms-iMac sites % mkdir test && cd test
tomwebroll@Toms-iMac test % yarn init
yarn init v1.22.10
question name (test):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
  Done in 5.25s.

Created .npmrc (TOKEN is my token)

tomwebroll@Toms-iMac test % vi .npmrc
tomwebroll@Toms-iMac test % cat .npmrc
//npm.greensock.com/:_authToken=TOKEN
@gsap:registry=https://npm.greensock.com

Tried to install

tomwebroll@Toms-iMac test % yarn add gsap@npm:@gsap:/shockingly
yarn add v1.22.10
info No lockfile found.
[1/4] 🔍  Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/%2fshockingly: Not found".
info If you think this is a bug, please open a bug report with the information provided in "/Users/tomwebroll/Sites/test/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Above didn't work & the URL is wrong so added a .yarnrc file to see if that would work... It didn't work but at least the registry is right now

tomwebroll@Toms-iMac test % vi .yarnrc
tomwebroll@Toms-iMac test % cat .yarnrc
registry "https://npm.greensock.com/"
tomwebroll@Toms-iMac test % yarn add gsap@npm:@gsap:/shockingly
yarn add v1.22.10
info No lockfile found.
[1/4] 🔍  Resolving packages...
error An unexpected error occurred: "https://npm.greensock.com/%2fshockingly: You must be logged in to install/publish packages.".
info If you think this is a bug, please open a bug report with the information provided in "/Users/tomwebroll/Sites/test/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Then tried to install code-frame and got an error because of the registry I set in the previous step, so I removed that & it resolved to the correct registry & worked as normal

tomwebroll@Toms-iMac test % yarn add code-frame
//npm.greensock.com/:_authToken=TOKEN
yarn add v1.22.10
info No lockfile found.
[1/4] 🔍  Resolving packages...
error An unexpected error occurred: "https://npm.greensock.com/code-frame: You must be logged in to install/publish packages.".
info If you think this is a bug, please open a bug report with the information provided in "/Users/tomwebroll/Sites/test/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
tomwebroll@Toms-iMac test % rm .yarnrc
tomwebroll@Toms-iMac test % yarn add code-frame
yarn add v1.22.10
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning code-frame > left-pad@1.3.0: use String.prototype.padStart()
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ code-frame@5.0.0
info All dependencies
├─ code-frame@5.0.0
└─ left-pad@1.3.0
  Done in 0.98s.

I then tried to install Font Awesome with a different registry. First of all, I changed .nvmrc to as follows. (Tried reordering lines for gsap too - no effect)

tomwebroll@Toms-iMac test % vi .npmrc
tomwebroll@Toms-iMac test % cat .npmrc
//npm.greensock.com/:_authToken=TOKEN
@gsap:registry=https://npm.greensock.com

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=FATOKEN

And installed it which worked fine:

tomwebroll@Toms-iMac test % yarn add @fortawesome/fontawesome-pro
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @fortawesome/fontawesome-pro@5.15.2
info All dependencies
└─ @fortawesome/fontawesome-pro@5.15.2
  Done in 17.05s.


If your still following me... I then thought I'd try with Yarn 2 in a new folder.

tomwebroll@Toms-iMac sites % mkdir testtwo && cd testtwo
tomwebroll@Toms-iMac testtwo % yarn init
yarn init v1.22.10
question name (testtwo):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
  Done in 4.21s.
tomwebroll@Toms-iMac testtwo % yarn set version berry
Resolving berry to a url...
Downloading https://github.com/yarnpkg/berry/raw/master/packages/berry-cli/bin/berry.js...
Saving it into /Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs...
Updating /Users/tomwebroll/Sites/testtwo/.yarnrc.yml...
Done!
tomwebroll@Toms-iMac testtwo % yarn --version
2.4.0

Then I copied over the same .npmrc settings from the first test

tomwebroll@Toms-iMac testtwo % vi .npmrc
tomwebroll@Toms-iMac testtwo % cat .npmrc
//npm.greensock.com/:_authToken=TOKEN
@gsap:registry=https://npm.greensock.com

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=FATOKEN

And tried to install Gsap again

tomwebroll@Toms-iMac testtwo % yarn add gsap@npm:@gsap:/shockingly
➤ YN0000: ┌ Resolution step
➤ YN0001: │ Error: gsap@npm:@gsap:/shockingly isn't supported by any available resolver
    at n.getResolverByDescriptor (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:336683)
    at n.bindDescriptor (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:336048)
    at d (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:357409)
    at async Promise.all (index 0)
    at async ie.resolveEverything (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:358614)
    at async /Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:377271
    at async f.startTimerPromise (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:389740)
    at async ie.install (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:377210)
    at async /Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:33217
    at async Function.start (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:388437)
➤ YN0000: └ Completed
➤ YN0000: Failed with errors in 0s 9ms

Same issue with Font Awesome this time though with Yarn 2...

tomwebroll@Toms-iMac testtwo % yarn add @fortawesome/fontawesome-pro
 YN0027: @fortawesome/fontawesome-pro@unknown can't be resolved to a satisfying range:

HTTPError: Response code 404 (Not Found)
    at se.<anonymous> (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:23:10082)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)

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

So I adjusted .yarnrc.yml with the following (didn't work without https:// for Font Awesome, didn't work with any for gsap. Tried // http:// and https://)

tomwebroll@Toms-iMac testtwo % vi .yarnrc.yml
tomwebroll@Toms-iMac testtwo % cat .yarnrc.yml
yarnPath: ".yarn/releases/yarn-berry.cjs"
npmRegistries:
  //npm.fontawesome.com:
    npmAlwaysAuth: true
    npmAuthToken: "FATOKEN"
  //npm.greensock.com:
    npmAlwaysAuth: true
    npmAuthToken: "TOKEN"

npmScopes:
  fortawesome:
    npmRegistryServer: https://npm.fontawesome.com/
  gsap:
    npmRegistryServer: https://npm.greensock.com/

Tried installing gsap again

tomwebroll@Toms-iMac testtwo % yarn add gsap@npm:@gsap:/shockingly
➤ YN0000: ┌ Resolution step
➤ YN0001: │ Error: gsap@npm:@gsap:/shockingly isn't supported by any available resolver
    at n.getResolverByDescriptor (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:336683)
    at n.bindDescriptor (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:336048)
    at d (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:357409)
    at async Promise.all (index 0)
    at async ie.resolveEverything (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:358614)
yarnPath: ".yarn/releases/yarn-berry.cjs"
    at async /Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:377271
    at async f.startTimerPromise (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:389740)
    at async ie.install (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:377210)
    at async /Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:33217
    at async Function.start (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:388437)
➤ YN0000: └ Completed
➤ YN0000: Failed with errors in 0s 7ms

Tried adding Font Awesome again

tomwebroll@Toms-iMac testtwo % yarn add @fortawesome/fontawesome-pro
 YN0000:  Resolution step
 YN0000:  Completed
 YN0000:  Fetch step
 YN0013:  @fortawesome/fontawesome-pro@npm:5.15.2::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Ffontawesome-pro%2F-%2F5.15.2%2Ffontawesome-pro-5.15.2
 YN0000:  Completed in 0s 339ms
 YN0000:  Link step
 YN0007:  @fortawesome/fontawesome-pro@npm:5.15.2::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Ffontawesome-pro%2F-%2F5.15.2%2Ffontawesome-pro-5.15.2.tgz must be built because it never did before or the last one failed
 YN0000:  Completed in 4s 51ms

...

Lastly, here is my .yarn-error.log from the first attempt using v1.22.10

Arguments: 
  /usr/local/bin/node /usr/local/bin/yarn add code-frame

PATH: 
  /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/Users/tomwebroll/.rvm/bin

Yarn version: 
  1.22.10

Node version: 
  15.3.0

Platform: 
  darwin x64

Trace: 
  Error: https://npm.greensock.com/code-frame: You must be logged in to install/publish packages.
      at Request.params.callback [as _callback] (/usr/local/lib/node_modules/yarn/lib/cli.js:66988:18)
      at Request.self.callback (/usr/local/lib/node_modules/yarn/lib/cli.js:140662:22)
      at Request.emit (node:events:376:20)
      at Request.<anonymous> (/usr/local/lib/node_modules/yarn/lib/cli.js:141634:10)
      at Request.emit (node:events:376:20)
      at IncomingMessage.<anonymous> (/usr/local/lib/node_modules/yarn/lib/cli.js:141556:12)
      at Object.onceWrapper (node:events:482:28)
      at IncomingMessage.emit (node:events:388:22)
      at endReadableNT (node:internal/streams/readable:1294:12)
      at processTicksAndRejections (node:internal/process/task_queues:80:21)

npm manifest: 
  {
    "name": "test",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT"
  }

yarn manifest: 
  No manifest

Lockfile: 
  No lockfile


Hopefully someone can see what I'm doing wrong here & point me in the right direction

Cheers

Link to comment
Share on other sites

  • Solution

So sorry. I just realized I had a typo in the GSAP install command that I provided here in the forum post. It had an extra :. It should be:

yarn add gsap@npm:@gsap/shockingly

Hence your "isn't supported by any available resolver" error.

 

FYI I'm using the same version of Yarn to test with.

Link to comment
Share on other sites

Thanks @ZachSaucier for sticking with me on this. It works with both versions of yarn when installing like this. Useful to know for future as I'm guessing that's how you use scope on some private packages with Yarn.

I'm sure I tried it like that, but whatever it's working & I can sleep well tonight now. 😀

Link to comment
Share on other sites

I'm glad you got things working @web_roll.

 

@scottgroovez I was able to install GSAP via the private registry in Yarn 2 by using the following .yarnrc.yml (replacing TOKEN with my token):

yarnPath: ".yarn/releases/yarn-berry.cjs"
  
unsafeHttpWhitelist:
  - "npm.greensock.com"

npmScopes:
  gsap:
    npmRegistryServer: "https://npm.greensock.com"
    npmAuthToken: "TOKEN"

Then installing via:

yarn add @gsap/PACKAGE

where PACKAGE is my Club GreenSock package (either business, shockingly, simply, or member).

 

Given I explicitly set the protocol to https I don't think the unsafeHttpWhitelist should be necessary, but it is defaulting to http for a reason I couldn't tell you. I would say raise an issue on the Yarn GitHub repo, but few of those are actually answered. 

 

I also can't find documentation on how to alias packages in Yarn 2 so it's installed under @gsap/PACKAGE... Definitely not optimal. I recommend using NPM instead of Yarn because of Yarn's lack of support. But if you have to use Yarn I recommend Yarn 1 at this point. 

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

No issue locally (removed gsap before installing 3.6 from tgz) but build in GitHub Actions throws the "computed integrity" error (even after supplying yarn cache clean gsap command). Yarn version 1.22.5 used both locally and on GitHub. Noticed that installing the latest 3.6 gsap-bonus.tgz appears in yarn.lock as version "3.5.1". Is this correct?

Link to comment
Share on other sites

  • 2 weeks later...

I have a working setup using yarn and vercel for anyone struggling to get it to work.

 

yarn -v

1.22.4

 

In .npmrc file

always-auth=true
@gsap:registry=https://npm.greensock.com
//npm.greensock.com/:_authToken=YOUR-TOKEN
//registry.npmjs.org/:_authToken=YOUR-TOKEN

In package.json

"dependencies": {
    "@gsap/shockingly": "^3.6.0",
    ...
    "gsap": "npm:@gsap/shockingly",
    ...   
}

In your vercel project setting, go to environment variables and copy exact lines in the .npmrc file, see attached screenshot

 

I hope that helps  👍🏽

supwill.dev

Screen Shot 2021-01-27 at 10.56.30 PM.png

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

  • 2 months later...
  • 4 weeks later...

@iamwillbk Thank you! If I could, I would upvote your solution a thousand times. It worked perfectly after several attempts / variations of the Vercel way

 

Since your screenshot, Vercel changed their environment variables slightly... No need to select Plaintext anymore, just make sure to start a new line for each line of the .npmrc

  • Like 1
  • Thanks 1
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...