Webpack Module Federation部署AWS后报错：模块不存在于容器中

本地运行正常，部署到AWS环境后，访问Main、Dashboard、AccountDetails三个MFE时，浏览器控制台均报错Module "./DashboardService" does not exist in container。已确认各应用的remoteEntry.js能正常返回200，尝试在exposes中添加.js扩展名无效，怀疑是AWS配置问题但无权限查看，请求排查原因。

主应用 webpack.config 配置 #

module.exports = (_, argv) => ({ 
  entry: './src/index', 
  mode: argv.mode, 
  devServer: { 
    static: { directory: path.join(__dirname, 'dist'), }, 
    port: 8080, 
    historyApiFallback: true, 
    hot: 'only', 
    headers: { 
      'Access-Control-Allow-Origin': '*', 
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS', 
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization', 
    }, 
  }, 
  resolve: { 
    extensions: ['.js', '.mjs', '.jsx', '.css'], 
    alias: { events: 'events', }, 
  }, 
  output: { 
    publicPath: argv.mode === 'development' ? 'http://localhost:8080/' : 'https://dyokuoph43qil.cloudfront.net/', 
    chunkFilename: '[id].[contenthash].js', 
  }, 
  module: { 
    rules: [ 
      { test: /\.m?js/, type: 'javascript/auto', resolve: { fullySpecified: false, }, }, 
      { test: /\.(sa|sc|c)ss$/, use: ['style-loader', 'css-loader', 'sass-loader'], }, 
      { test: /\.(ts|tsx|js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, 
    ], 
  }, 
  plugins: [ 
    new ModuleFederationPlugin({ 
      name: 'main', 
      filename: 'remoteEntry.js', 
      remotes: { 
        main: `main@${argv.mode === 'development' ? 'http://localhost:8080/' : 'https://dyokuoph43qil.cloudfront.net/'}remoteEntry.js`, 
        dashboard: `dashboard@${argv.mode === 'development' ? 'http://localhost:8081/' : 'https://d39vnhu5rarlq1.cloudfront.net/'}remoteEntry.js`, 
        accountdetails: `accountdetails@${argv.mode === 'development' ? 'http://localhost:8082/' : 'https://d2ormgnid5awt.cloudfront.net/'}remoteEntry.js`, 
      }, 
      exposes: { './Shell': './src/Shell', }, 
      shared: { 
        react: { singleton: true, requiredVersion: deps.react, }, 
        'react-dom': { singleton: true, requiredVersion: deps['react-dom'], }, 
        'react-router-dom': { singleton: true, requiredVersion: deps['react-router-dom'], }, 
      }, 
    }), 
    new HtmlWebPackPlugin({ template: './public/index.html', publicPath: '/', }), 
    new ESLintPlugin(), 
  ], 
});

Dashboard 应用 webpack.config 配置 #

module.exports = (_, argv) => ({ 
  entry: './src/index', 
  mode: argv.mode, 
  devServer: { 
    static: { directory: path.join(__dirname, 'dist'), }, 
    port: 8081, 
    historyApiFallback: true, 
    hot: 'only', 
  }, 
  output: { 
    publicPath: argv.mode === 'development' ? 'http://localhost:8081/' : 'https://d39vnhu5rarlq1.cloudfront.net/', 
    chunkFilename: '[id].[contenthash].js', 
  }, 
  resolve: { 
    extensions: ['.js', '.mjs', '.jsx', '.css'], 
    alias: { events: 'events', }, 
  }, 
  module: { 
    rules: [ 
      { test: /\.m?js/, type: 'javascript/auto', resolve: { fullySpecified: false, }, }, 
      { test: /\.(sa|sc|c)ss$/, use: ['style-loader', 'css-loader', 'sass-loader'], }, 
      { test: /\.svg$/, loader: 'svg-inline-loader', }, 
      { test: /\.(ts|tsx|js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, 
    ], 
  }, 
  plugins: [ 
    new ModuleFederationPlugin({ 
      name: 'dashboard', 
      filename: 'remoteEntry.js', 
      remotes: { 
        main: `main@${argv.mode === 'development' ? 'http://localhost:8080/' : 'https://dyokuoph43qil.cloudfront.net/'}remoteEntry.js`, 
        dashboard: `dashboard@${argv.mode === 'development' ? 'http://localhost:8081/' : 'https://d39vnhu5rarlq1.cloudfront.net/'}remoteEntry.js`, 
        accountdetails: `accountdetails@${argv.mode === 'development' ? 'http://localhost:8082/' : 'https://d2ormgnid5awt.cloudfront.net/'}remoteEntry.js`, 
      }, 
      exposes: { './DashboardService': './src/components/DashboardService.js' }, 
      shared: { 
        react: { singleton: true, requiredVersion: deps.react, }, 
        'react-dom': { singleton: true, requiredVersion: deps['react-dom'], }, 
        'react-router-dom': { singleton: true, requiredVersion: deps['react-router-dom'], }, 
      }, 
    }), 
    new HtmlWebPackPlugin({ template: './public/index.html', publicPath: '/', }), 
    new ESLintPlugin(), 
  ], 
});

排查方向 #

• 检查remoteEntry.js内容：在浏览器打开Dashboard的remoteEntry.js链接，确认是否包含./DashboardService的映射。如果没有，排查生产构建时的路径问题——AWS环境区分大小写，本地可能不区分，需确保DashboardService.js的文件名、路径与配置完全一致。
• 验证publicPath与chunk路径：确认生产环境publicPath结尾斜杠是否正确，检查Network面板中Dashboard相关chunk的请求路径是否正确，若路径错误，可能是AWS路径重写导致publicPath失效。
• 清除缓存：AWS Cloudfront可能缓存旧的remoteEntry.js，可尝试在请求时加查询参数（如?v=1）强制刷新，或联系运维清除Cloudfront缓存。
• CORS配置检查：虽然本地配置了CORS头，但AWS环境可能未同步配置，查看Network面板中chunk请求是否有CORS错误或404状态。
• 模块导出一致性：确认DashboardService.js的导出方式（默认导出/命名导出）与主应用的导入方式匹配。
• 版本兼容性：确认主应用与子应用的Webpack、ModuleFederationPlugin版本一致，版本不兼容可能导致模块映射错误。

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