Remix Vite集成Module Federation微前端：暴露与获取失败问题

问题概述 #

在Remix.run（Vite版）中尝试实现Module Federation微前端时遇到以下问题：

• 远程应用执行yarn build（即remix vite:build）时触发Rollup错误：Entry module "react-dom" cannot be external.
• 用npx vite build可成功构建远程应用，但仅生成客户端代码，缺失服务端构建产物
• 宿主应用加载远程组件时浏览器报错：Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'http:'

当前依赖版本：

"@originjs/vite-plugin-federation": "^1.3.5",
"@remix-run/node": "^2.10.3"

核心原因 #

Remix是全栈框架，会同时构建客户端和服务端代码，但Module Federation本质是为浏览器客户端设计的模块共享方案，直接在全栈构建流程中启用会和Remix的服务端构建逻辑冲突：

1. 服务端构建时不允许将react-dom等核心依赖设为external
2. Node.js的ESM加载器默认不支持从HTTP URL加载模块，导致服务端渲染阶段无法处理远程组件

解决方案 #

1. 远程应用配置调整 #

需要在vite.config.ts中区分客户端/服务端构建，仅在客户端启用Module Federation插件：

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig(({ isSsrBuild }) => ({
  plugins: [
    remix(),
    // 仅客户端构建启用联邦插件
    !isSsrBuild &&
      federation({
        name: "remoteApp",
        filename: "remoteEntry.js",
        exposes: {
          "./Cardio": "./app/components/Cardio.tsx",
        },
        shared: {
          react: { singleton: true, requiredVersion: "^18.2.0" },
          "react-dom": { singleton: true, requiredVersion: "^18.2.0" },
        },
      }),
  ].filter(Boolean),
}));

构建时仍使用remix vite:build，此时服务端构建会跳过联邦插件，避免react-dom external错误。

2. 宿主应用配置与组件加载 #

宿主端同样需要区分客户端/服务端构建，且必须通过客户端动态导入加载远程组件，避免服务端渲染时触发HTTP URL加载错误：

宿主vite.config.ts配置

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig(({ isSsrBuild }) => ({
  plugins: [
    remix(),
    // 仅客户端构建启用联邦插件
    !isSsrBuild &&
      federation({
        name: "hostApp",
        remotes: {
          remoteApp: "http://localhost:5173/remoteEntry.js",
        },
        shared: {
          react: { singleton: true, requiredVersion: "^18.2.0" },
          "react-dom": { singleton: true, requiredVersion: "^18.2.0" },
        },
      }),
  ].filter(Boolean),
}));

宿主组件中加载远程组件

使用Remix的clientOnly组件包裹远程组件，确保仅在客户端渲染：

import { clientOnly } from "remix-utils/client-only";

// 动态导入远程组件
const RemoteCardio = clientOnly(() =>
  import("remoteApp/Cardio").then((mod) => mod.Cardio)
);

export function HostPage() {
  return (
    <div>
      <h1>Host App</h1>
      <RemoteCardio fallback={<p>Loading remote component...</p>} />
    </div>
  );
}

3. 关键注意事项 #

• 目前Remix Vite版无官方Module Federation支持，上述方案为社区适配方案，需关注框架更新
• 确保远程和宿主的react/react-dom版本一致，避免单例冲突
• 服务端渲染阶段无法渲染远程组件，需通过clientOnly提供服务端fallback内容

内容的提问来源于stack exchange，提问作者A-SM