ReferenceError: __dirname is not defined in ES module scope

の解決方法についてまとめました。

経緯

Gatsby.js の config ファイルにおいて、

importの記述をする必要があったため、

gatsby.config.js から gatsby.config.mjs にリネームした際に、これまでの相対パスの記述を変更するために必要になりました。

結論

ES module では

__dirname

は使えません。なので、

path: new URL("./content/thumbnail", import.meta.url).pathname,

上記のように書き換えたら無事動きました。

ちなみに、元々の記述は以下のとおりです。

path: `${__dirname}/content/thumbnail`,

補足

node.js において、JavaScript には CommonJS と ESmodule の２種存在するようです。

何も指定しないと CommonJS が使うようになり、

.mjsファイルにするか、

package.json に "type": "module"

を設定すると ESmodule になるようです。

ちなみに、CommonJS にしたい時は.cjsファイルにするみたいです。

import.meta.url

は、モジュールの絶対 URL を取得することができます。

それを URL クラスを使って整形すれば期待した形で取得することができます。

new URL("./content/thumbnail", import.meta.url).pathname

こういった変換、互換みたいな処理は AI が優秀なので結構雑にプロンプトを投げても解決してくれるので感謝感謝なのだ。