Vite Module Federation跨React版本报错：useState空指针异常

错误根源 #

这个TypeError: Cannot read properties of null (reading 'useState')错误，核心原因是你在远程应用中把React设为了共享依赖，但你的需求是实现React多版本共存——共享配置会强制远程应用使用宿主的React实例，要么宿主未提供匹配版本的React，要么共享机制导致React实例未正确加载，最终出现null调用useState的情况。

具体修改方案 #

1. 调整远程应用的共享配置 #

删除远程应用shared中的react和react-dom配置，让远程应用打包时包含自身的React版本，不再依赖宿主提供：

// 远程应用 vite.config.js
import federation from '@originjs/vite-plugin-federation';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'supportClients',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App',
      },
      // 移除react和react-dom的shared配置，让远程应用自带React版本
    }),
  ],
  build: {
    modulePreload: false,
    target: 'esnext',
    minify: false,
    cssCodeSplit: false,
  },
});

如果需要保留部分共享逻辑但允许版本共存，也可以将shared配置改为：

shared: {
  react: { singleton: false, requiredVersion: false },
  'react-dom': { singleton: false, requiredVersion: false },
},

2. 宿主应用导入远程组件的正确方式 #

保持宿主配置不变，但必须使用异步导入配合React的懒加载机制，避免初始化阶段的React实例冲突：

// 宿主应用中导入远程组件的代码
const RemoteApp = React.lazy(() => import('supportClients/App'));

// 使用时配合Suspense处理加载状态
function HostApp() {
  return (
    <React.Suspense fallback={<div>加载远程组件中...</div>}>
      <RemoteApp />
    </React.Suspense>
  );
}

关键原理 #

• Module Federation的shared配置是为了实现依赖共享、减少打包体积，和你“多版本共存”的需求完全相反。
• 移除React的共享配置后，远程应用会将自身的React、React-DOM打包进产物，从而拥有独立的运行环境，和宿主的React版本互不干扰。
• 异步导入+React.lazy+Suspense可以避免远程组件的React实例和宿主实例在应用初始化阶段发生冲突，确保各自环境独立运行。

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