はじめに
実務で開発サーバを起動(npm run dev)した際に遭遇した以下エラーについて、原因と対処法を記載します。
throw Error('Dynamic require of "' + x + '" is not supported');
^
Error: Dynamic require of "path" is not supported
🪄 概要・原因
早速ズバリ原因ですが、
ESMに対応していないライブラリをESMでbundleした時に起こる現象
です。
調べると、このような記事も出てきます。
ESMとは？
JavaScriptのモジュール化機能であるCommonJSにて、ブラウザでWebアプリケーションを作るときは、「モジュールバンドラー」を使ってCommonJSモジュールを一度バンドルしてから使う必要があるという課題を解決するために生まれた新たなモジュールシステム
👉 JavaScriptのコードをモジュールという単位で分割し、import/export構文を使って他のファイルで定義された関数や変数を利用可能にする仕組み
🪄 対処法
１：require の使用を許可する
こちらの通り、banner指定でimport { createRequire } from 'module';const require = createRequire(import.meta.url);を組み込みrequireを使えるようにする
banner:
js: import { createRequire } from 'module';const require = createRequire(import.meta.url);
２：エラーとなってるパッケージの使用箇所を見直す
今回ですと、エラー対象pathとなっていますが対象パッケージの定義・使用場所を変更することで解消される場合があります。
例えば、私の場合はクリーンアーキテクチャ & モノレポ構成で以下のように3レイヤーに分かれているプロジェクトで、各々役割が明確に決まっている開発構成でしたが...
・handler：API実行時、イベント検知起点として呼ばれる入り口部分
・useCase：API実行後、handlerからのリクエスト受け取り、その後のDBアクセス等を含むクラスまたは関数の実行を行う部分
・repository：useCaseから呼ばれるクラス、DBアクセス・操作を行う関数が記述された部分
👉 上記対象パッケージをrepositoryでインポート・使用した際に今回のエラーが出たため、useCase側でインポート・使用する形へ変更した所、無事解消できました。