自从迁移到微前端外壳架构后，我们开始尝试在外壳之外共享一些模块，以供旧版 Web 应用使用。在共享 React 头部组件时，其中一个团队遇到了 Webpack 报错。

当尝试从联邦模块而非 npm 包渲染该组件时，应用崩溃并报出以下错误：

TypeError: __webpack_modules__[moduleId] is not a function

问题在于，应用在 Webpack 尚未加载 remoteEntry.js 文件时就尝试渲染 React 组件。有几种方法可以解决这个问题。

添加 bootstrap 文件

为打包产物新增一个入口，通过动态导入来引入应用的其余部分。

例如，如果之前是以 src/index.js 作为主入口，可以新增一个 src/bootstrap.js 文件，内容如下：

import("./index");

然后将 Webpack 的入口改为指向 src/bootstrap.js。这样就可以在 src/index.js 中直接渲染联邦 React 组件，因为此时它们已经及时加载完成。

注意：如果你使用的是 Babel <7.8.0，需要加载插件来支持该语法。建议考虑升级！

懒加载与 Suspense

或者，你也可以使用 React.lazy 来延迟渲染 React 组件，直到它加载完成。这同样使用了动态导入语法：

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

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

在远程模块加载完成并可用之前，会先渲染 fallback 中的 span。采用这种方式，你还可以将 remoteEntry.js 的加载延迟到真正需要时再进行，详见我的另一篇文章。