自從轉向微前端殼層架構後，我們開始嘗試將殼層之外的一些模組分享給較舊的網頁應用程式。在分享我們的 React header 元件時，其中一個團隊遇到了 Webpack 錯誤。

當嘗試從 federated 模組而非 npm 套件來渲染該元件時，應用程式會崩潰並出現以下錯誤：

TypeError: __webpack_modules__[moduleId] is not a function

問題在於，應用程式在 Webpack 載入 remoteEntry.js 檔案之前，就嘗試渲染 React 元件。有幾種方式可以處理這個問題。

新增 bootstrap 檔案

在你的 bundle 中新增一個進入點，使用動態 import 來引入應用程式的其餘部分。

舉例來說，如果你原本是以 src/index.js 作為主要進入點，請新增一個 src/bootstrap.js 檔案，內容如下：

import("./index");

接著將 Webpack 的 entry 更新為指向 src/bootstrap.js。這樣你就能在 src/index.js 中直接渲染 federated React 元件，因為它們已經及時載入完成。

註：如果你使用的是 Babel <7.8.0，就需要載入外掛來支援此語法。也建議考慮升級！

延遲載入與 Suspense

或者，你也可以使用 React.lazy 來延遲渲染 React 元件，直到它載入完成。這同樣會使用動態 import 語法：

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

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

在遠端模組載入完成並可用之前，會先渲染 fallback 的 span。透過這種方式，你也可以等到真正需要時才載入 remoteEntry.js，詳情請見我的另一篇文章。