基于vite-plugin-federation的微前端引入MUI Autocomplete报useContext空值错误咨询

以下是针对该问题的具体排查和解决方案：

1. 强制共享React及MUI核心依赖为单例 #

微前端中出现useContext空值错误，最常见的原因是主应用与远程应用加载了多份React/MUI实例，导致上下文无法跨应用共享。需要在Vite联邦配置中明确将这些依赖设为单例共享：

远程应用vite.config.js配置： #

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './AutocompleteComponent': './src/components/MyAutocomplete',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.2.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.2.0' },
        '@mui/material': { singleton: true, requiredVersion: '^5.14.0' },
        '@mui/system': { singleton: true, requiredVersion: '^5.14.0' },
        '@emotion/react': { singleton: true, requiredVersion: '^11.11.0' },
        '@emotion/styled': { singleton: true, requiredVersion: '^11.11.0' },
      },
    }),
  ],
});

主应用vite.config.js同步配置： #

确保主应用的shared字段与远程应用完全一致，保证依赖版本和单例规则统一。

2. 统一MUI上下文的作用范围 #

• 仅在主应用的最外层包裹ThemeProvider和StyledEngineProvider，远程组件不要自行重复包裹这些上下文提供者。
• 若远程组件必须单独处理样式，可通过主应用传递共享的theme和emotion缓存，避免上下文实例隔离。

示例（主应用提供全局上下文）：

import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const cache = createCache({ key: 'global-mui-cache' });
const theme = createTheme();

function App() {
  return (
    <CacheProvider value={cache}>
      <ThemeProvider theme={theme}>
        {/* 远程组件挂载容器 */}
        <RemoteComponentContainer />
      </ThemeProvider>
    </CacheProvider>
  );
}

3. 严格对齐依赖版本 #

主应用与远程应用的@mui/material、@emotion/react、react等核心依赖版本必须完全一致，版本差异会导致上下文结构不兼容：

• 在两个应用的package.json中锁定版本号（避免^或~模糊匹配）
• 执行yarn list @mui/material或npm list @mui/material验证版本一致性，清理冲突的依赖树

4. 调试验证React实例唯一性 #

在主应用和远程应用中分别执行以下代码，确认是否共享同一React实例：

console.log('React版本:', React.version);
console.log('是否为全局React实例:', React === window.React);

若输出结果不一致，说明shared配置未生效，需检查Vite联邦配置的语法是否正确，或是否存在依赖安装缓存问题。

5. 简化远程组件导出逻辑 #

确保远程组件的导出方式简洁，避免嵌套或复杂的高阶组件包裹导致上下文丢失：

// 远程组件示例
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

export default function MyAutocomplete() {
  const options = ['选项1', '选项2', '选项3'];
  return (
    <Autocomplete
      options={options}
      renderInput={(params) => <TextField {...params} label="选择选项" />}
    />
  );
}

内容的提问来源于stack exchange，提问作者Evgeniy S.