「Yarn」の記事 - Crieit

yarn 時に gifsicle で gifsicle pre-build test failed エラー

2021-11-28T17:45:22+09:00

数日前から yarn 時に gifsicle で gifsicle pre-build test failed エラーが出るようになってしまったので対処します。

あれこれ試しましたが、結論から言うと imagemin-gifsicle が依存している gifsicle の 5.0.0 だとダメなので、 resolution で 5.2.1 を指定すると良さそうです。

現象

    "devDependencies": {

        // 略

        "gulp-imagemin": "^7.1.0",
        "imagemin-mozjpeg": "^9.0.0",
        "imagemin-pngquant": "^9.0.2",
        "imagemin-gifsicle": "^7.0.0",
        "imagemin-svgo": "^9.0.0",

        // 略

    }

imagemin-gifsicle を使用しているプロジェクトで yarn したところ、以下のエラーで失敗するようになってしまいました。

warning Error running install script for optional dependency: "PATH\\TO\\PROJECT\\node_modules\\gifsicle: Command failed.
Exit code: 1
Command: node lib/install.js
Arguments:
Directory: PATH\\TO\\PROJECT\\node_modules\\gifsicle
Output:
Response code 404 (Not Found)
gifsicle pre-build test failed
compiling from source
Error: Command failed: C:\\WINDOWS\\system32\\cmd.exe /s /c \"autoreconf -ivf\"
'autoreconf' �́A�����R�}���h�܂��͊O���R�}���h�A
����\\�ȃv���O�����܂��̓o�b�` �t�@�C���Ƃ��ĔF������Ă��܂���B


    at PATH\\TO\\PROJECT\\node_modules\\bin-build\\node_modules\\execa\\index.js:231:11
success Saved lockfile.

バージョンを上げても直後は特に問題なかったような気はするのですが、逐一キャッシュを削除したりしているわけではないので不明。

仕方ないので、色々ググりながら対応してみます。

対処 (失敗したものたち)

コマンドプロンプトを管理者実行

gifsicle ありの状態で cmd.exe を管理者として実行→変わらず。

hosts に Github 関係の名前解決を書き込む

>ping raw.githubusercontent.com

raw.githubusercontent.com [185.199.108.133]に ping を送信しています 32 バイトのデータ:
185.199.108.133 からの応答: バイト数 =32 時間 =5ms TTL=58
185.199.108.133 からの応答: バイト数 =32 時間 =5ms TTL=58

185.199.108.133 の ping 統計:
    パケット数: 送信 = 2、受信 = 2、損失 = 0 (0% の損失)、
ラウンド トリップの概算時間 (ミリ秒):
    最小 = 5ms、最大 = 5ms、平均 = 5ms

元々 raw.githubusercontent.com に ping はできていましたが、 hosts に次のように追記してみます。

52.74.223.119     github.com
192.30.253.119    gist.github.com
54.169.195.247    api.github.com
185.199.111.153   assets-cdn.github.com
151.101.76.133    raw.githubusercontent.com
151.101.76.133    gist.githubusercontent.com
151.101.76.133    cloud.githubusercontent.com
151.101.76.133    camo.githubusercontent.com
151.101.76.133    avatars0.githubusercontent.com
151.101.76.133    avatars1.githubusercontent.com
151.101.76.133    avatars2.githubusercontent.com
151.101.76.133    avatars3.githubusercontent.com
151.101.76.133    avatars4.githubusercontent.com
151.101.76.133    avatars5.githubusercontent.com
151.101.76.133    avatars6.githubusercontent.com
151.101.76.133    avatars7.githubusercontent.com
151.101.76.133    avatars8.githubusercontent.com

変わらず。

なお、ここまで次の issue にあった対処法。

Error: Command failed: C:\WINDOWS\system32\cmd.exe /s /c "autoreconf -ivf" · Issue #33 · imagemin/imagemin-gifsicle · GitHub

最小限構成で実験する

長丁場になりそうだったので最小限構成の package.json を作成して検証を続行。

{
  "name": "tmp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "imagemin-gifsicle": "^7.0.0"
  }
}

これでyarn。変わらず。

ちなみに yarn.lock の中身は次のような感じ。

gifsicle@^5.0.0:
  version "5.3.0"
  resolved "https://registry.yarnpkg.com/gifsicle/-/gifsicle-5.3.0.tgz#499713c6f1e89ebbc3630da3a74fdb4697913b4e"
  integrity sha512-FJTpgdj1Ow/FITB7SVza5HlzXa+/lqEY0tHQazAJbuAdvyJtkH4wIdsR2K414oaTwRXHFLLF+tYbipj+OpYg+Q==
  dependencies:
    bin-build "^3.0.0"
    bin-wrapper "^4.0.0"
    execa "^5.0.0"

imagemin-gifsicle@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/imagemin-gifsicle/-/imagemin-gifsicle-7.0.0.tgz#1a7ab136a144c4678657ba3b6c412f80805d26b0"
  integrity sha512-LaP38xhxAwS3W8PFh4y5iQ6feoTSF+dTAXFRUEYQWYst6Xd+9L/iPk34QGgK/VO/objmIlmq9TStGfVY2IcHIA==
  dependencies:
    execa "^1.0.0"
    gifsicle "^5.0.0"
    is-gif "^3.0.0"

imagemin-gifsicle が依存している gifsicle のバージョンが悪いのではないか、と思い resolutions を追加することにしました。

resolutions を追加

{
  "name": "tmp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "imagemin-gifsicle": "^7.0.0"
  },
  "resolutions": {
    "gifsicle": "^6.1.0"
  }
}

すると、 yarn は通りました。

しかし、 6系は "Use native ESM" なので require を使用している現環境での使用は不可です。惜しい。

resolutions の指定を 5.3.0 にする

[email protected], gifsicle@^5.0.0:
  version "6.1.0"
  resolved "https://registry.yarnpkg.com/gifsicle/-/gifsicle-6.1.0.tgz#16194fe7d9420a539709eb065e7245eaf74de5a7"
  integrity sha512-tmnKbW2UQzoc/FTg2dq98sUaoGM1/CRQP+HtyeIMNLDlB8ijZbX7TKBCc2s5YJ8oXUZIxdqXH2rKXnCB0/Hg3w==
  dependencies:
    bin-build "^3.0.0"
    bin-wrapper "^4.0.0"
    execa "^5.1.1"

gifsicle - npmを確認したところ、11/26現在で 6.1.0 と並んで "3 days ago" となっている 5系最新の 5.3.0 があることが判明。

{
  "name": "tmp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "imagemin-gifsicle": "^7.0.0"
  },
  "resolutions": {
    "gifsicle": "^5.3.0"
  }
}

しかしNG。

5.3.0 is error · Issue #134 · imagemin/gifsicle-bin · GitHub

yep, this repo's 5.3.0 tag is missing, that makes the downloading process of bin-wrapper failed.

5.3.0 is error · Issue #134 · imagemin/gifsicle-bin · GitHub

タグ付けをミスって生まれてしまったバージョンらしいので、これは使えないとのこと。なんて紛らわしい……。

resolutions の指定を 5.2.1 にする

{
    "name": "tmp",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "devDependencies": {
      "imagemin-gifsicle": "^7.0.0"
    },
    "resolutions": {
      "gifsicle": "5.2.1"
    }
}

package.json のチルダ(~) とキャレット(^) - Qiita

^5.2.1 とキャレットを付けると 5.2.1 <= version < 6.0.0 となってしまい、 5.3.0 に上がってしまうので 5.2.1 とキャレットを外して指定します。

[email protected], gifsicle@^5.0.0:
  version "5.2.1"
  resolved "https://registry.yarnpkg.com/gifsicle/-/gifsicle-5.2.1.tgz#efadab266a493ef0b4178e34597493349937369e"
  integrity sha512-9ewIQQCAnSmkU2DhuWafd1DdsgzAkKqIWnY+023xBLSiK9Az2TDUozWQW+SyRQgFMclbe6RQldUk/49TRO3Aqw==
  dependencies:
    bin-build "^3.0.0"
    bin-wrapper "^4.0.0"
    execa "^5.0.0"

imagemin-gifsicle@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/imagemin-gifsicle/-/imagemin-gifsicle-7.0.0.tgz#1a7ab136a144c4678657ba3b6c412f80805d26b0"
  integrity sha512-LaP38xhxAwS3W8PFh4y5iQ6feoTSF+dTAXFRUEYQWYst6Xd+9L/iPk34QGgK/VO/objmIlmq9TStGfVY2IcHIA==
  dependencies:
    execa "^1.0.0"
    gifsicle "^5.0.0"
    is-gif "^3.0.0"

これでようやく通りました。処理も無事にできることを確認。

……思ったよりも手間取りました。

📝 Node.js パッケージを公開するための GitHub Actions を構築する

2021-06-21T22:22:57+09:00

react-emoji-textarea の開発を行った際、リリースを作成したら自動的に Node.js パッケージにライブラリが公開される仕組みがほしいと考え、GitHub Actions でそれを実現することにしました。

その際、公式サイトに公開されている内容を参考に GitHub Actions を作成したのですが、そのまま利用すると私の環境では下記のエラーが発生してしまいました。

error Couldn't publish package: "https://registry.yarnpkg.com/@nikaera/react-emoji-textarea: You do not have permission to publish \"react-emoji-textarea\". Are you logged in as the correct user?"

上記のエラーについて調査しながら改修したところ、最終的に下記の GitHub Actions で Node.js パッケージを公開できるようになりました。secrets.NPM_TOKEN には NPM Token を登録します。

# package.yml
name: Node.js Package
on:
  # workflow_dispatch を追加して手動でも実行できるよう改修
  workflow_dispatch:
  release:
    types: [created]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: "14.x"
          registry-url: "https://registry.npmjs.org"
          # registry.npmjs.org へアクセスする際は必ず認証を試みるオプションを追加
          always-auth: true
          # scope には自分のユーザ名を指定
          scope: "@nikaera"
        # .npmrc に https://registry.npmjs.org アクセス時に利用する認証情報を記載する
      - run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
      - name: Build react-emoji-textarea 😆💖
        run: |
          yarn install --frozen-lockfile
          yarn format
          yarn build
      - run: yarn publish --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

Yarn でパッケージをインストールする際に info There appears to be trouble with your network connection. Retrying... が出て失敗してしまう

2021-01-08T23:52:48+09:00

Yarn でパッケージをインストールする際に

info There appears to be trouble with your network connection. Retrying...

が出て失敗してしまう現象に遭遇したので対処法をメモ。

現象

package.json が存在するプロジェクトで普通に yarn したら失敗しました。

> yarn

## 略

[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz: ESOCKETTIMEDOUT".
info If you think this is a bug, please open a bug report with the information provided in "PATH/TO/PROJECT/DIRECTORY/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Webサイトは閲覧できるので接続自体は正常の模様。他の原因としては、「該当パッケージが重過ぎてダウンロード中にタイムアウトしてしまう」というケース。今回の場合は @material-ui/icons ですね。

対処

対処として、プロジェクト直下に .yarnrc というファイルを作成し、以下のように記述しました。

network-timeout 600000

単位はミリ秒なので、上記の場合は600秒、つまり10分となります。

今回はこれで上手く行きました。

その他の対策

ファイルを作成せずにコマンドの引数として渡すこともできるようです(未実施)。

> yarn config set network-timeout 600000

または

> yarn install --network-timeout 600000

Yarnのコントリビュート説明ページが良い件について

2019-02-22T08:17:26+09:00

ふとYarnのコントリビュートの説明ページを見たところ、OSS貢献するための情報が親切に書かれていて非常に良いなと思ったため紹介してみます。実際のページは下記になります。ちなみにYarnというのはNode.jsのパッケージマネージャです。

コントリビュート | Yarn

コントリビュートとは

そもそもコントリビュートとは何かというと、YarnのようなオープンソースはGitHub上のリポジトリとして公開されており、誰でも開発に参加することができるようになっています。そのようにしてOSS開発に貢献することをコントリビュートといいます。

自分のコミットが承認されてリポジトリに取り込まれると、そのプロジェクトのContributorになることができ、IssuesやPull requestsの自分の書き込みにもContributorのマークが付くようになります。

コントリビュートの説明ページとは

各オープンソースのプロジェクトにはだいたいコントリビュートの説明が書かれています。

というのも、誰かが適当なコーディングスタイルでぐちゃぐちゃなプログラムを書いてきたり、誰も必要としていない機能のプルリクエストを勝手に送ってきても管理者含めてみんなが困ってしまいますので、そのあたりの手順やルールなどがまとめられています。

小さなプロジェクトなどだと「自由に送ってね！」とかのものもありますが、大きなプロジェクトだと結構細かい手順等を書いてくれていたりしてくれています。

そんな中Yarnの説明ページを見てみると、他とは違って親切に作られていることに気付きました。

どのように良いか

取り組みやすいIssueがどれかを教えてくれている

いくつか、最初に取り組むのに適したリンクを簡単に紹介しておきます。

ということで実際のIssuesにリンクが貼られています。下記のようなリンクがあります。

初めて取り組むのによいバグ (Good first bugs)
初めて取り組むのに良い機能 (Good first features)
助けが必要なインパクトの大きい issue (High impact issue that need help)
問題を再現するスクリプトが必要な issue (Issues need reproduction scripts)
トリアージが必要な issue

これがすごく良いなと思いました。公式としてはじめて取り組むのはこれが良さそう、というのを指定してくれているので、「ほんとにこのあたりは進めてみても良いのだろうか…」という事を悩まずにすむためそれだけでも貢献しやすさが全然違ってくると思います。最初ってこういうところでドキドキするだけで結構消耗してしまったりしますので…。

日本語で書かれている

さすが規模の大きいプロジェクトだからかもしれませんが、日本語というか多言語で書かれていることは個人的にあまり見たことがなかったため、よくよく考えたら親切なのでは、と思いました。

そもそもだいたいこういう説明がMarkdownでGit管理されているだけだったりすることが多いので英語で書かれていることがほとんどかなと思います。（とはいえ決まりきったことが書かれているだけなので英語でも特に不便はないのですが）

実際の対応の流れが書かれている

下記のようなものが書かれています。

環境構築の方法
テストを実行する方法
実際にプルリクエストを送る方法

実際の実行方法は他のOSSでもだいたい書かれていますし、PRを送る方法も調べればいくらでも出てくるのですが、実際に本家が書いてくれていることの安心感はやはり大きいと思います。

行動規範が書かれている

多くの人が利用し参加するプロジェクトだからかもしれませんが、行動規範までがしっかり書かれているのは珍しいような気がしました。いわゆるネットマナーと言うか、古い言葉で言うとネチケットみたいなものでしょうか。

逆にこういうのが書かれていることで、OSSの世界にもやばい人たちが結構いるのかな…という想像も膨らみます。

恐る恐るコントリビュートをはじめる人からすると、相手がまともな人なのかおかしな人なのか、特に国という枠を超えた場合には判断しづらいと思いますので、何かひどいことを言われても「世の中こういうものなのかな…。自分が悪かったんだろうな…」と不必要に自分をせめて貢献をやめてしまう人などもいるのではないかと思います。そういうのは非常にもったいないですし、少しでもそういうことが減る要因になるのであればすごく良いことかなと感じます。

やっていきましょう

OSSへの貢献に興味のある人は、こういう貢献の方法が分かりやすいプロジェクトからはじめてみるのも手かもしれません。ぜひちょうどやりやすいものを探してチャレンジしてみましょう。たまたま今回見つけたのがYarnだったというだけで、他にも分かりやすいものがありそうな気はします。

他にも翻訳へのコミットやちょっとしたタイポの修正、コードではなくIssuesへの書き込みでの貢献等、とりあえずできるところからはじめてみる、という方法もありそうです。