Webpack模块联邦报错：__webpack_modules__[moduleId]不是函数

开发者阿泽

2026-7-26

解决Webpack Module Federation同步导入远程模块导致的__webpack_modules__[moduleId] is not a function错误

问题根源

同步导入远程模块的时机错误：Webpack Module Federation的远程模块依赖remoteEntry.js的加载完成，而同步导入会在remoteEntry.js尚未加载时就执行模块解析，导致找不到对应模块定义。

解决方案

方法1：使用动态导入（推荐）

修改home/src/index.js，将同步导入改为异步动态加载，确保remoteEntry.js加载完成后再获取远程组件：

const Greetings = () => {
    const node = document.createElement('h1');
    node.innerHTML = 'App Shell';
    return node;
}

document.addEventListener("DOMContentLoaded", async () => {
    document.body.appendChild(Greetings());
    // 异步加载远程Header组件
    const { default: Header } = await import('nav/Header');
    document.body.appendChild(Header());
});

方法2：提前引入remoteEntry.js

在home/index.html的<head>中手动引入nav应用的remoteEntry.js，确保它在主bundle之前加载：

<!DOCTYPE html>
<html>
<head>
    <title>Module Federation Example</title>
    <script src="http://localhost:4001/remoteEntry.js"></script>
</head>
<body>
</body>
</html>

此方法可保留原同步导入代码，但动态导入更符合Module Federation的模块化设计原则。