Webpack5宿主加载Vite模块联邦远程应用时container未定义，求解决方案

问题描述 #

将远程应用从 Webpack 5 迁移到 Vite.js 后，Webpack 5 宿主应用动态加载远程模块时出现报错：container 为 undefined，无法执行 container.init()。

远程应用（Vite）配置 #

export default defineConfig({
    plugins: [
        vue(),
        federation({
            name: 'cdn',
            filename: 'remoteEntry.js',
            exposes: {
                './cdnApplication': './src/main.js'
            },
            shared: ['vue']
        })
    ],
    server: {
        port: 3002
    }
})

宿主应用（Webpack 5）配置 #

new ModuleFederationPlugin({
    name: 'mfe_host_panel',
    filename: 'remoteEntry.js',
    remotes: {},
}),

报错的动态加载代码 #

function loadComponent(scope, module) {
    return async () => {
        await __webpack_init_sharing__("default");
        const container = window[scope];

        await container.init(__webpack_share_scopes__.default); // 此处container为undefined报错
        const factory = await window[scope].get(module);
        const Module = factory();
        return Module;
    };
}

核心原因 #

Vite Plugin Federation 的默认行为不会将容器实例挂载到 window 对象上，而 Webpack 的动态加载逻辑依赖从 window[scope] 获取容器，导致找不到实例。

可行解决方案 #

方案1：修改 Vite 远程配置，显式挂载容器到全局 #

在 Vite 的联邦插件配置中添加 exposeGlobal: true，强制将容器挂载到 window[scope]（需确保使用最新版本的 Vite Plugin Federation）：

export default defineConfig({
    plugins: [
        vue(),
        federation({
            name: 'cdn',
            filename: 'remoteEntry.js',
            exposes: {
                './cdnApplication': './src/main.js'
            },
            shared: ['vue'],
            exposeGlobal: true // 新增：将容器挂载到window.cdn
        })
    ],
    server: {
        port: 3002
    }
})

修改后，原宿主的动态加载代码即可正常运行。

方案2：调整宿主加载逻辑，手动获取容器 #

不依赖全局变量，通过 Vite 联邦提供的全局方法 __federation_get_container__ 获取容器，同时手动加载远程 remoteEntry.js：

// 手动加载远程remoteEntry脚本
async function loadRemoteEntry(url) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;
        script.onload = () => resolve();
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

// 修改后的动态加载函数
function loadComponent(scope, module, remoteEntryUrl) {
    return async () => {
        await __webpack_init_sharing__("default");
        // 先加载远程入口脚本
        await loadRemoteEntry(remoteEntryUrl);
        // 通过Vite联邦的全局方法获取容器
        const container = await __federation_get_container__(scope);
        await container.init(__webpack_share_scopes__.default);
        
        const factory = await container.get(module);
        const Module = factory();
        return Module;
    };
}

// 调用示例
// loadComponent('cdn', './cdnApplication', 'http://localhost:3002/remoteEntry.js')();

方案3：静态声明远程依赖（非动态加载） #

如果不需要动态切换远程模块，可以直接在 Webpack 配置中声明远程依赖，无需手动编写加载逻辑：

new ModuleFederationPlugin({
    name: 'mfe_host_panel',
    filename: 'remoteEntry.js',
    remotes: {
        // 格式：远程名称@远程remoteEntry地址
        cdn: 'cdn@http://localhost:3002/remoteEntry.js'
    },
    shared: ['vue'] // 同步共享依赖版本，避免多实例冲突
}),

在宿主应用中直接异步导入使用：

import { defineAsyncComponent } from 'vue';
// 直接导入远程模块
const CdnApplication = defineAsyncComponent(() => import('cdn/cdnApplication'));

注意事项 #

• 确保宿主和远程应用的共享依赖（如 Vue）版本兼容，建议锁定到相同大版本，避免出现多实例导致的异常
• 优先使用最新版本的 Vite Plugin Federation，修复了不少与 Webpack 联邦的兼容性问题
• 动态加载时需添加错误捕获逻辑，处理网络失败、容器不存在等异常情况

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