React微前端嵌套加载报错：__rf_placeholder__shareScope未定义

问题背景 #

我有三个基于Vite + TypeScript构建的React应用（<Form />、<MessagesSystem />、<HostApp />），所有核心依赖（React、TypeScript等）版本完全一致，且均已安装Vite模块联邦插件。预期实现嵌套微前端加载：<Form />作为子应用加载到<MessagesSystem />中，再将<MessagesSystem />加载到<HostApp />中。

当前状态：单独将<Form />或<MessagesSystem />加载到<HostApp />时可正常运行；但将<Form />加载到<MessagesSystem />时，抛出错误：

ReferenceError: __rf_placeholder__shareScope is not defined

我的推测 #

• <Form />在<MessagesSystem />中并非初始渲染，而是触发特定操作后才加入组件树，和常规直接渲染微前端的场景不同，这会不会是诱因？
• <MessagesSystem />的模块联邦配置同时包含了消费<Form />和自身作为微前端暴露的设置，会不会产生冲突？

补充信息 #

<Form />和<MessagesSystem />的tsconfig.json均配置了baseUrl与paths：

"baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@icons/*": ["src/assets/icons/*"],
      "@img/*": ["src/assets/img/*"],
      "@audio/*": ["src/assets/audio/*"],
      "@i18n": ["src/i18n/index.ts"],
      "@utils/*": ["src/utils/*"],
      "@pages/*": ["src/pages/*"],
      "@layouts/*": ["src/layouts/*"],
      "@state/*": ["src/state/*"],
      "@state": ["src/state/index.tsx"],
      "@typeDefinitions/*": ["src/typeDefinitions/*"],
      "@/*": ["src/*"]
    }

曾看到有问题提到baseUrl/paths不匹配可能引发类似问题，特此说明。

排查尝试 #

尝试导出仅包含按钮的极简组件进行调试，仍出现相同错误。

可能的解决方案 #

1. 统一嵌套层级的shareScope配置 #

模块联邦的shareScope是共享依赖的核心标识，嵌套场景下必须确保所有层级应用使用同一个shareScope名称（默认是default）。检查<MessagesSystem />的模块联邦配置，在消费<Form />时显式指定shareScope：

// MessagesSystem的vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'messagesSystem',
      exposes: { // 自身作为微前端暴露的配置
        './MessagesApp': './src/App.tsx'
      },
      remotes: { // 消费Form的配置，显式指定shareScope
        formApp: {
          external: 'http://localhost:5173/assets/remoteEntry.js',
          shareScope: 'default'
        }
      },
      shared: { // 共享依赖配置，确保层级一致
        react: { singleton: true },
        'react-dom': { singleton: true },
        typescript: { singleton: true }
      }
    })
  ]
});

2. 延迟加载时手动初始化shareScope #

由于<Form />是触发操作后才渲染，可能初始化阶段shareScope尚未就绪。可以在加载<Form />前手动初始化模块联邦的shareScope：

// MessagesSystem中加载Form的组件逻辑
import { loadRemoteModule } from '@originjs/vite-plugin-federation/dist/utils';

const loadFormComponent = async () => {
  // 先初始化默认shareScope
  await __webpack_init_sharing__('default');
  const formModule = await loadRemoteModule({
    remoteEntry: 'http://localhost:5173/assets/remoteEntry.js',
    module: './FormApp'
  });
  return formModule.default;
};

// 触发操作时执行加载
const handleOpenForm = async () => {
  const FormComponent = await loadFormComponent();
  // 渲染FormComponent
};

3. 避免tsconfig paths干扰远程模块解析 #

确保<MessagesSystem />的Vite配置同步tsconfig的paths，同时避免远程模块的导入被本地alias覆盖：

// MessagesSystem的vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/vite-plugin-federation';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths(), // 同步tsconfig的paths配置
    federation({ /* ... 现有配置 ... */ })
  ],
  resolve: {
    alias: {
      // 确保远程模块路径不被本地alias解析
      'formApp': 'http://localhost:5173/assets/remoteEntry.js'
    }
  }
});

4. 调整shared配置的eager属性 #

如果shared配置中设置了eager: true，嵌套场景下可能导致shareScope初始化顺序混乱。尝试移除eager: true，改为按需加载：

shared: {
  react: { singleton: true },
  'react-dom': { singleton: true }
}

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