我们最近在一些较旧的应用中推广使用 Module Federation，期间在使用旧版 Babel 的项目中遇到了一些问题。

通常添加一个 bootstrap 文件就能确保 federated module 在使用前已加载完成，我在之前的一篇文章中介绍过这种做法。然而，在其中一个应用中，我们仍然遇到了如下报错：

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

团队已经添加了一个包含动态导入的 bootstrap 文件，以便让 Webpack 对 bundle 的其余部分进行代码分割。该项目已经在使用最新版本的 @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]——升级到最新版本后，无需显式禁用该插件也能解决问题。