使用Vite-Plugin-Federation引入带Hooks的React组件报错，求配置排查

使用@originjs/vite-plugin-federation: v1.1.9构建微前端时，远程组件包含React Hooks会导致宿主网站报错（错误截图：React Hooks调用错误），以下是问题分析及修复方案：

宿主（Host）配置与代码 #

vite.config.js #

export default defineConfig(({ mode }) => {
  // 原代码缺少return语句，导致配置未正确导出
  return {
    plugins: [
      react(),
      federation({
        name: 'host',
        filename: 'remoteEntry.js',
        remotes: {
          imbee_workflow: 'http://localhost:5001/assets/remoteEntry.js',
        },
        shared: ['react', 'react-dom'],
      }),
    ],
    build: {
      outDir: path.join(__dirname, 'build'),
      target: 'esnext',
      minify: false,
      cssCodeSplit: false,
    },
  }
})

业务代码 #

import { Box } from '@mui/material';
import React from 'react';

// 原代码导入路径与remotes配置别名不匹配
const Button = React.lazy(() => import('remote/Button'));

function hostPage() {
  return (
    <Box height="100%" width="100%" overflow="hidden">
      <Button caption="Hello World" />
    </Box>
  );
}

export default hostPage;

远程应用（Remote）配置与代码 #

vite.config.js #

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'remote',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button.tsx',
        './Hello': './src/Hello.tsx',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false,
  },
});

Button组件代码 #

import React from 'react';

function Button({ caption = 'Home Button' }) {
  // 不使用Hooks时无任何问题
  const [test, setTest] = React.useState('test');
  return <button>{`${caption}-${test}`}</button>;
}

export default Button;

问题原因及修复方案 #

1. 远程应用别名不匹配 #

宿主remotes配置中远程应用的别名是imbee_workflow，但业务代码里用了remote/Button导入，路径不匹配导致组件加载异常，进而触发Hooks错误。

修复：
把宿主代码的导入路径改成和remotes配置一致：

const Button = React.lazy(() => import('imbee_workflow/Button'));

2. React实例未单例共享 #

微前端中如果宿主和远程的React、ReactDOM不是同一个实例，会触发Hooks调用错误（Hooks依赖统一的React上下文），需要强制单例模式。

修复：
修改宿主和远程的shared配置，添加singleton: true（版本号根据实际项目调整）：

// 宿主和远程都要改
shared: {
  react: { singleton: true, requiredVersion: '^18.0.0' },
  react-dom: { singleton: true, requiredVersion: '^18.0.0' }
},

3. 宿主配置语法错误 #

原宿主defineConfig回调里缺少return语句，导致配置未正确导出，引发Vite加载异常。

修复：
补充return语句，确保配置对象正常导出（如修正后的宿主vite.config.js所示）。

4. 额外注意事项 #

• 确保宿主和远程的React、ReactDOM版本一致或兼容，版本差异也可能导致Hooks报错；
• 开发环境下要确认远程应用已启动，remoteEntry.js可正常访问。

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