使用module-federation/nextjs-mf时NextJS宿主应用无法解析模块路径

安全阿岳

2026-8-23

Module Federation with nextjs-mf: Host Application Fails to Resolve Remote Module Paths

我用webpack的module-federation/nextjs-mf插件构建微前端架构，官方纯NextJS示例运行正常。当前搭建了1个宿主应用和多个远程应用，均基于NextJS、nextjs-mf插件及TypeScript。远程应用之间可以成功共享组件，但宿主应用出现无法解析模块路径的错误。

代码实现

动态导入远程组件的代码：

import dynamic from "next/dynamic"
const NextRemoteComponent = dynamic(
  () => import("remote_finances/next-remote-component"),
  { ssr: false }
)

宿主应用的next.config.js配置：

module.exports = {
  webpack5: true,
  webpack(config, options) {
    const { webpack, isServer } = options;
    config.experiments = { topLevelAwait: true };

    config.module.rules.push({
      test: /_app.js/,
      loader: '@module-federation/nextjs-mf/lib/federation-loader.js',
    });

    config.plugins.push(
      new webpack.container.ModuleFederationPlugin({
        remotes: {
          remote_finances: "remote_finances@http://localhost:8081/_next/static/chunks/remoteEntry.js",
          remote: 'remote@http://localhost:8081/_next/static/chunks/remoteEntry.js',
        },
        shared: {
          react: {
            singleton: true,
            eager: true,
            requiredVersion: false,
          },
        },
      }),
    );
    return config;
  },
  reactStrictMode: true,
  experimental: {
    outputStandalone: true
  },
  env: {
    BASE_URL : `https://qa-core-api.nordhen.com`,
  },
};