我們一直在將 Module Federation 擴展到一些較舊的應用程式上，過程中在一些使用舊版 Babel 的專案中遇到了一些問題。

通常加入一個 bootstrap 檔案就能確保 federated module 在被使用前已經載入，這個做法我在先前的文章中曾介紹過。然而，在其中一個應用程式中，我們仍然遇到了以下錯誤：

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

團隊已經加入了帶有 dynamic import 的 bootstrap 檔案，讓 Webpack 能對 bundle 的其餘部分進行 code splitting。該專案本身已經在使用最新版本的 @babel/preset-env，因此不需要額外設定就能支援這種語法。

經過一番除錯後，我發現 Webpack 根本沒有進行 code splitting。問題在於 @babel/plugin-transform-dynamic-import 會轉換 import() 運算式，導致 Webpack 無法利用它來進行 code splitting。這個外掛在使用 @babel/preset-env 時應該會自動停用，但在這個案例中卻沒有。

你可以透過以下設定讓 @babel/preset-env 停用這個外掛：

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

這樣就能讓 Webpack 進行 code splitting，並修復這個錯誤。不過，真正的根本原因在於該專案使用的是 [email protected]——只要升級到最新版本，就不需要手動停用外掛也能解決問題。