Module Federation构建报错：未找到remoteEntry chunk文件

问题详情 #

配置Module Federation增强版插件后启动应用，触发报错：HookWebpackError: [ Module Federation Manifest Plugin ]: no files found for remoteEntry chunk，remoteEntry文件未正常生成。

插件配置片段：

new ModuleFederationPlugin({
  name: 'my-app',
  filename: 'remoteEntry.js',
  exposes: {
    './MyApp': './src/app/App.tsx',
  },
}),

完整Webpack配置 #

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin =
  require('@module-federation/enhanced').ModuleFederationPlugin;
const path = require('path');

module.exports = {
  entry: './src/main.tsx',
  target: 'web',
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    port: 4201,
  },
  optimization: {
    runtimeChunk: false,
    splitChunks: {
      chunks: 'async',
    },
  },
  output: {
    publicPath: 'auto',
    path: path.join(__dirname, '../../dist/apps/my-app'),
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'my-app',
      filename: 'remoteEntry.js',
      exposes: {
        './MyApp': './src/app/App.tsx',
      },
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

App.tsx代码 #

export const MyApp = () => {
  return <div data-testid="MAIN_PAGE">Info plus Page</div>;
};

项目结构 #

解决方法 #

1. 修复插件版本或替换为官方核心插件 #

@module-federation/enhanced部分版本存在remoteEntry生成逻辑bug：

• 降级至0.9.0及以下稳定版本，或升级到最新修复版本
• 若无需增强特性，直接替换为Webpack官方插件：

  const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
  

2. 调整splitChunks配置 #

当前仅对异步chunk分割，remoteEntry属于同步chunk可能被优化丢失。修改优化项：

optimization: {
  runtimeChunk: false,
  splitChunks: {
    chunks: 'all', // 改为all确保同步chunk被正确处理
  },
},

3. 检查入口文件是否直接引用暴露模块 #

若src/main.tsx直接导入了./src/app/App.tsx，Webpack会将组件打包进主chunk，导致remoteEntry无内容生成。确保主入口仅作为应用启动入口，不直接引用暴露给远程的组件。

4. 验证路径与目录权限 #

• 确认output.path指向的../../dist/apps/my-app目录存在，且Webpack有读写权限
• 核对exposes中的文件路径./src/app/App.tsx与实际项目结构匹配（截图显示路径正确，可手动验证文件存在）

5. 临时禁用Manifest生成 #

若上述方法无效，可在插件配置中禁用manifest生成规避报错：

new ModuleFederationPlugin({
  name: 'my-app',
  filename: 'remoteEntry.js',
  exposes: {
    './MyApp': './src/app/App.tsx',
  },
  manifest: false, // 禁用自动生成manifest
}),

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