其他#

本节收集了与“模块联邦”实现相关的常见问题（非特定错误代码）。 主要目标是为不熟悉“模块联邦”实现原理的初学者提供额外的上下文和解决方案路径

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:#

错误信息#

解决方案#

该错误为 React 多实例问题，通常出现在 react 没有复用同一个实例的场景。 可以通过设置 shared 并且设置 singleton: true 单例模式 来避免此问题。

{
    ...
    new ModuleFederationPlugin({
            ...,
         // Default basic configuration
         // shared: [
         //   'react',
         //   'react-dom',
         //   'my-custom-module'
         // ]

         // Configuration with more specificity
            shared: {
                react: { singleton: true, },
                'react-dom': { singleton: true, },
                'my-custom-module': { singleton: true, },
                ...
            },
        })
      ])
  }

HMR 失效#

• 使用 React Developer Tools

• 若 shared 提供方是线上的 react ，那么需要使用 Module Federation DevTools，并点击 Enable HMR 按钮

CORS 警告#

当项目中设置了 exposes ，会被视为生产者，为保证生产者资源能正常被消费者加载，@module-federation/modern-js、@module-federation/rsbuild-plugin 会设置 Access-Control-Allow-Origin 为 * ，并同时发出警告。

解决方案#

• [Modern.js]: 设置 devServer.headers 值为指定的域名白名单而非 *

• [Rsbuild]: 设置 server.cors.origin 值为指定的域名白名单而非 *