マイクロフロントエンドのシェルアーキテクチャに移行して以来、古いWebアプリケーション向けにシェルの外側でいくつかのモジュールを共有することを検討し始めました。React製のヘッダーコンポーネントを共有した際、あるチームがWebpackのエラーに遭遇しました。

npmパッケージではなくフェデレーテッドモジュールからコンポーネントをレンダリングしようとすると、アプリが次のエラーでクラッシュします。

TypeError: __webpack_modules__[moduleId] is not a function

原因は、WebpackがremoteEntry.jsファイルを読み込む前にアプリケーションがReactコンポーネントをレンダリングしようとしていたことでした。この問題に対処する方法はいくつかあります。

bootstrapファイルを追加する

バンドルに新しいエントリーポイントを追加し、dynamic importを使ってアプリケーションの残りを含めるようにします。

例えば、これまでsrc/index.jsをメインのエントリーポイントとして読み込んでいた場合、新たにsrc/bootstrap.jsファイルを作成し、次のように記述します。

import("./index");

そして、Webpackのentryをsrc/bootstrap.jsを指すように更新します。そうすれば、src/index.js内でフェデレーテッドなReactコンポーネントをすぐにレンダリングしても、読み込みが間に合うため問題なく動作します。

注: Babel <7.8.0をお使いの場合は、この構文をサポートするためにプラグインを読み込む必要があります。アップグレードも検討してください！

遅延読み込みとSuspense

別の方法として、React.lazyを使ってReactコンポーネントが読み込まれるまでレンダリングを遅延させることもできます。これもdynamic import構文を使用します。

const RemoteComponent = React.lazy(
  () => import("remote-module/RemoteComponent")
);

const App = () => (
  <React.Suspense fallback={<span>Loading...</span>}>
    <RemoteComponent />
  </React.Suspsense>
);

リモートが読み込まれて利用可能になるまで、fallbackのspanが表示されます。このアプローチでは、別の投稿で解説しているように、必要になるまでremoteEntry.jsの読み込み自体を遅延させることもできます。