「gulp-imagemin」の記事 - 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.

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

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

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

gisicle を足す

    "devDependencies": {
        // 略
        "gulp-imagemin": "^7.1.0",
        "imagemin-mozjpeg": "^9.0.0",
        "imagemin-pngquant": "^9.0.2",
        "imagemin-gifsicle": "^7.0.0",
        "gifsicle": "6.1.0",            // 追加
        "imagemin-svgo": "^9.0.0",
        // 略
    }

変わらず。

逆にいっそ gulp-imagemin 以外全て削除

    "devDependencies": {
        // 略
        "gulp-imagemin": "^7.1.0",
        // 略
    }

変わらず。

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

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

キャッシュ削除

> yarn cache clean
yarn cache v1.22.11
success Cleared cache.
Done in 450.56s.

変わらず。

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"

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

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

参考

gifsicle

package.json

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

gulp-imagemin で Error [ERR_REQUIRE_ESM]: Must use import to load ES Module と怒られる

2021-08-17T23:17:25+09:00

経緯

ある日、 package gardening をして Gulp を走らせたら

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

と怒られてしまいました。

$ gulp
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: PATH\TO\PROJECT\DIRECTORY\node_modules\gulp-imagemin\index.js
require() of ES modules is not supported.
require() of PATH\TO\PROJECT\DIRECTORY\node_modules\gulp-imagemin\index.js from PATH\TO\PROJECT\DIRECTORY\gulp\tasks\imagemin.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from PATH\TO\PROJECT\DIRECTORY\node_modules\gulp-imagemin\package.json.

今回は gulp-imagemin のスクリプトの中に起因するようなので、そちらに手を入れるのは避けたいところです。

さて、どうしたものか。

結論

結論から先にいうと、 gulp-imagemin をダウングレードすることで回避するしかなさそうです。

今回は 8.0.0 から既存の 7.1.0 にダウングレードします。

調査

"type": "module"

Node.js の ESModules

検索すると、 package.json にパラメータを追記する方法が出てきます。

{
    "engines": {
        "node": ">=16.0.0",
        "npm": ">=6.14.9"
    },
    "engineStrict": true,
    "prettier": {},
    "type": "module" // 追記
}

"type": "module" を追記する方法です。

しかし、この方法を採用する場合、既存の Gulpタスク全てを CommonJS (require) から ES Modules (import) に書き換える必要があります。

それはそれで既存スクリプトの書き換えが大変なことになってしまうので、この方法は今回は不採用。

公式リポジトリを覗く

そこで公式リポジトリを覗いてみます。

早速同じ内容の Issues が散見されます。そして回答では「リリースノートを見よ」とのこと。

Releases · sindresorhus/gulp-imagemin · GitHub

This package is now pure ESM. Please read this.

Releases · sindresorhus/gulp-imagemin · GitHub

最初からここを見ましょう、という話ではあるのですが。

Pure ESM package · GitHub

ご覧の通り、「8.0.0 からは ES Modules のパッケージになっていますよー」というアナウンス。

したがって、先の結論の通り CommonJS を使用したければダウングレードせよ、ということになります。是非もなし。