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

  • 投稿日
  • 著者 アルム＝バンド
  • カテゴリー Gulp

経緯

ある日、 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”

検索すると、 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 が散見されます。そして回答では「リリースノートを見よ」とのこと。

This package is now pure ESM. Please read this.

Releases · sindresorhus/gulp-imagemin · GitHub

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

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

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

参考

ES Modules gulp-imagemin

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧