如何解决Vue-Vite项目用ModuleFederation引入JS组件的解析错误？

这个错误的核心原因是Vite联邦插件与Webpack Module Federation的兼容性配置不匹配，加上远程模块的加载方式不符合Vite插件的要求，以下是具体解决步骤：

1. 升级Vite联邦插件版本 #

旧版本的@originjs/vite-plugin-federation对Webpack Module Federation的支持存在兼容性问题，先安装最新稳定版：

npm install @originjs/vite-plugin-federation@latest --save-dev

2. 修正Vite配置的remotes格式 #

修改vite.config.js中的remotes配置，明确指定远程模块的来源格式，适配Webpack构建的模块：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    vue(),
    federation({
      name: "vue-app",
      filename: "remoteEntry.js",
      remotes: {
        header: {
          external: "HeaderApp@http://localhost:3000/remoteEntry.js",
          format: "var", // 匹配Webpack MF的变量导出格式
          from: "webpack" // 明确远程模块来自Webpack构建
        }
      },
      shared: ['vue'] // 若有共享依赖，在此声明（可选）
    }),
  ],
});

3. 确保Webpack远程项目正确运行 #

你的Webpack配置为生产模式，必须先构建并启动带跨域支持的静态服务器：

• 先在JS项目执行构建：

npm run build

• 用静态服务器启动dist目录（以serve工具为例）：

npx serve dist --port 3000 --cors

必须添加--cors参数解决跨域限制，否则浏览器会拦截远程模块请求。

4. 修正Vue项目的组件引入方式 #

采用Vue官方的异步组件规范集成远程组件，而非直接实例化JS对象：

import { createApp, defineAsyncComponent } from "vue";
import "./style.css";
import App from "./App.vue";

// 用defineAsyncComponent加载远程组件
const RemoteHeader = defineAsyncComponent(() => import("header/HeaderApp"));

const app = createApp(App);
// 注册全局组件
app.component("RemoteHeader", RemoteHeader);
app.mount("#app");

然后在App.vue中直接使用：

<template>
  <div>
    <RemoteHeader />
  </div>
</template>

5. 检查Webpack远程项目的配置（可选） #

若仍有问题，可在Webpack的ModuleFederationPlugin中添加共享依赖声明（如果Header组件依赖Vue等库）：

new ModuleFederationPlugin({
  name: "HeaderApp",
  filename: "remoteEntry.js",
  exposes: {
    "./HeaderApp": "./src/index.js",
  },
  shared: {
    vue: { singleton: true } // 确保全局只有一个Vue实例
  }
}),

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