远程React-Bootstrap组件报错：dispatcher is null问题排查

这个问题的核心是Module Federation环境下React依赖未正确共享导致的多实例冲突。React-Bootstrap的Col组件内部依赖React Hooks（比如useContext，用于和Row/Container的布局上下文交互），当远程应用和宿主应用加载了各自独立的React实例时，Hook调用会因为不在同一个React运行时环境中触发invalid hook call和dispatcher is null错误——本地运行时是单实例环境，所以不会出现问题，移除Col后组件不涉及Hook上下文依赖，冲突也就消失了。

具体排查与解决步骤 #

• 强制React/ReactDOM单实例共享
  在远程应用和宿主应用的webpack.config.js的ModuleFederationPlugin配置中，必须将react、react-dom标记为shared并设置singleton: true，确保全局仅存在一个实例：

  // 远程应用 webpack.config.js
  new ModuleFederationPlugin({
    name: 'remoteApp',
    filename: 'remoteEntry.js',
    exposes: {
      './ColComponent': './src/components/YourColComponent',
    },
    shared: {
      react: {
        singleton: true,
        requiredVersion: '^18.2.0',
        eager: true, // 可选，确保依赖提前加载避免时序问题
      },
      'react-dom': {
        singleton: true,
        requiredVersion: '^18.2.0',
        eager: true,
      },
      // 如果宿主也使用react-bootstrap，建议同步共享
      'react-bootstrap': {
        singleton: true,
        requiredVersion: '^2.7.4',
      }
    },
  })
  

  宿主应用的shared配置要和远程保持一致，版本号必须匹配，避免因版本差异导致的实例隔离。

• 验证依赖实例一致性
  在远程组件和宿主应用中分别添加打印代码，确认使用的是同一个React实例：

  // 远程组件中
  import React from 'react';
  console.log('Remote React version:', React.version);
  console.log('Remote React is global:', React === window.React);
  
  // 宿主应用中
  import React from 'react';
  console.log('Host React version:', React.version);
  console.log('Host React is global:', React === window.React);
  

  如果输出的版本不一致或者实例不相等，说明共享配置未生效，需要检查webpack配置是否正确应用。

• 清理缓存重新构建
  Webpack的缓存可能导致依赖未正确共享，执行以下操作后重新构建远程和宿主应用：

  • 删除远程/宿主应用的dist目录
  • 删除node_modules/.cache（如果存在）
  • 重新执行npm run build和启动命令

• 检查组件导入方式
  确保远程组件中Col的导入是直接来自react-bootstrap，而非本地复制的组件文件，避免意外引入额外的依赖实例：

  // 正确导入方式
  import { Col } from 'react-bootstrap';
  
  // 错误方式（会导致依赖重复）
  import Col from './local-copy-of-col';
  

内容的提问来源于stack exchange，提问作者nan12