node の開発環境を ESModule に変更 - プログラマーのメモ書き

kintone のアップロードツールがあるのはありがたいのですが、再度、開発環境でローカルサーバーを使おうとすると、いちいち設定を変更するのが、なかなかかったるいです。

ということで、こちらの記事で、ローカルサーバーへの切り替え処理を書いた（最終的には無駄になった）のですが、その際に package.json に type を追加してプロジェクト全体を ESModuleに指定しました。

package.json

{
  （略）
  "type": "module",
  （略）
}

すると、 webpack を実行した際に、

PS D:\work\tmp\kintone_tutorial\revert_live_server> npx webpack --mode development 
[webpack-cli] Failed to load 'D:\work\tmp\kintone_tutorial\revert_live_server\webpack.config.js' config
[webpack-cli] ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'D:\work\tmp\kintone_tutorial\revert_live_server\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///D:/work/tmp/kintone_tutorial/revert_live_server/webpack.config.js:1:14
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)
    at async WebpackCLI.tryRequireThenImport (D:\work\tmp\kintone_tutorial\revert_live_server\node_modules\webpack-cli\lib\webpack-cli.js:232:34)
    at async loadConfigByPath (D:\work\tmp\kintone_tutorial\revert_live_server\node_modules\webpack-cli\lib\webpack-cli.js:1406:27)
    at async WebpackCLI.loadConfig (D:\work\tmp\kintone_tutorial\revert_live_server\node_modules\webpack-cli\lib\webpack-cli.js:1515:38)
    at async WebpackCLI.createCompiler (D:\work\tmp\kintone_tutorial\revert_live_server\node_modules\webpack-cli\lib\webpack-cli.js:1781:22)
    at async WebpackCLI.runWebpack (D:\work\tmp\kintone_tutorial\revert_live_server\node_modules\webpack-cli\lib\webpack-cli.js:1877:20)
    at async Command.<anonymous> (D:\work\tmp\kintone_tutorial\revert_live_server\node_modules\webpack-cli\lib\webpack-cli.js:944:21)
PS D:\work\tmp\kintone_tutorial\revert_live_server>

とエラーが出るようになりました。エラーメッセージ見ても分かるように、 node が本来持っている CommonJS のモジュールと ESModule が混在しているのが原因でしょう。

ネットを調べると、メッセージの内容は異なりますが、似たような記事が見つかりました。

[0] Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: Module: /Users/....../webpack.config.js [0] require() of ES modules is not supported.と出た時の対処法 #package.json - Qiita

なので、こちらを参考にして、 webpack.config.js を webpack.config.cjs に替えてやれば問題なく動作しました。

なお、他にも webpack 実行時にいろいろとエラー（例えば import は拡張子まで含めて指定する必要がある、など）が出るので、エラーメッセージを読みながら修正しておきました。

（略）
ERROR in ./src/kintone-revert-test.js 1:0-33
Module not found: Error: Can't resolve './lib/util' in 'D:\work\tmp\kintone_tutorial\revert_live_server\src'
Did you mean 'util.js'?
BREAKING CHANGE: The request './lib/util' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve './lib/util' in 'D:\work\tmp\kintone_tutorial\revert_live_server\src'
（略）

同様に ESLint と Prettier も拡張子を

.eslintrc.js -> .eslintrc.cjs
.prettierrc.js -> prettierrc.cjs

と変更したら、一応動いたようです。

ご参考までに。