古いアプリケーションへの Module Federation の導入を進める中で、古いバージョンの Babel を使っているプロジェクトでいくつか問題が発生しました。

通常、bootstrap ファイルを追加することで、フェデレーテッドモジュールが使用される前に確実に読み込まれるようにできます。この手法については以前の記事で紹介しました。しかし、あるアプリケーションでは依然として次のエラーが発生していました：

Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react

チームは Webpack がバンドルの残りをコード分割できるように、dynamic import を使った bootstrap ファイルを追加していました。プロジェクトではすでに最新バージョンの @babel/preset-env を使用していたため、構文をサポートするための追加対応は不要なはずでした。

デバッグを進めた結果、Webpack がまったくコード分割を行っていないことがわかりました。原因は@babel/plugin-transform-dynamic-import が import() 式を変換してしまい、Webpack がコード分割に使えなくなっていたことにありました。このプラグインは @babel/preset-env を使用している場合は自動的に無効になるはずですが、今回はそうなっていませんでした。

@babel/preset-env でこのプラグインを無効化するには、次のように設定します：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": 3,
        "exclude": ["proposal-dynamic-import"]
      }
    ]
  ]
}

これにより Webpack がコード分割できるようになり、エラーは解消しました。ただし根本的な原因は、プロジェクトが [email protected] を使用していたことにありました。最新バージョンにアップグレードすることで、プラグインを明示的に無効化しなくても問題は解決しました。