Webpack与Vite模块联邦集成报错：Loading script failed

版本信息 #

• vite-plugin-federation: ^1.3.5（最新版）
• vite: ^5.1.0（最新版）

复现步骤 #

• 使用React、TypeScript和Webpack搭建宿主项目
• 使用Vite搭建远程项目
• 在宿主与远程项目间配置Module Federation
• 运行项目，观察到报错"Loading script failed"

实际问题 #

配置Module Federation后，同时运行宿主和远程项目时出现"Loading script failed"报错。

单独运行各项目时：

• 基于Vite的远程React项目（执行npm run build & npm run preview）可正常展示
• 但同时运行宿主与远程项目时，会抛出"Loading script failed"错误

代码示例（宿主与远程项目）

宿主项目 - config-overrides.js

const path = require('path');
const hashValue = Date.now();
const { dependencies } = require('./package.json');
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  experiments: {
    outputModule: true,
  },
  webpack: function (config, env) {
    config.output.filename = `[name].${hashValue}.js`;
    config.output.chunkFilename = `[name].${hashValue}.chunk.js`;
    config.output.path = path.join(__dirname, 'build');
    config.output.publicPath = 'auto';
    config.plugins = [
      ...config.plugins,
      new ModuleFederationPlugin({
        name: 'HostPoc',
        remotes: {
          PrimeDev: 'PrimeDev@http://localhost:4173/assets/remoteEntry.js',
        },
        shared: ['react', 'react-dom', 'react-router-dom'],
      }),
    ];
    return config;
  },
};

宿主项目引入远程模块

const PrimeDev = React.lazy(() => import('primeDev/App'));
...
<Switch>
        <Route path="/prime_poc" element={<PrimeDev />} />
</Switch>

远程项目 - vite-overrides.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: "PrimeDev",
      filename: "remoteEntry.js",
      exposes: {
        "./App": {
          import: "./src/App",
          name: "App",
        },
      },
      shared: ["react", "react-dom"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
    rollupOptions: {
      output: {
        format: "esm",
        entryFileNames: "assets/[name].js",
        minifyInternalExports: false,
      },
    },
  },
});

预期结果：配置Module Federation后项目可正常运行，无"Loading script failed"报错。

解决方案 #

1. 修正远程入口路径
   Vite build后remoteEntry.js直接输出在dist根目录下，而非assets子目录，宿主配置里的远程入口地址需改为：

   remotes: {
     PrimeDev: 'PrimeDev@http://localhost:4173/remoteEntry.js',
   },
   

2. 统一共享依赖配置
   为避免依赖重复加载或版本冲突，给共享依赖添加单例模式与版本约束：

   • 宿主侧修改shared配置：

     shared: {
       react: { singleton: true, requiredVersion: dependencies.react },
       'react-dom': { singleton: true, requiredVersion: dependencies['react-dom'] },
       'react-router-dom': { singleton: true, requiredVersion: dependencies['react-router-dom'] }
     },
     

   • 远程侧修改shared配置：

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

3. 修正模块引入大小写
   远程配置的模块名称是PrimeDev，宿主引入时需保持大小写一致，改为：

   const PrimeDev = React.lazy(() => import('PrimeDev/App'));
   

4. 确保跨域与端口可用
   检查宿主、远程项目的端口是否被占用，若存在跨域问题，在Vite配置中添加跨域支持：

   export default defineConfig({
     // ...其他配置
     server: { cors: true, port: 4173 },
     preview: { cors: true, port: 4173 }
   });
   

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