I’m using two Next.js applications and employing webpack to set up module federation for configuring micro-frontends. At the host, I successfully load remoteEntry.js, but when loading related modules, it falls back to using the host’s address to load modules.

this is next host config

/** @type {import('next').NextConfig} */

const nextConfig = {
  webpack: (config, options) => {
    const { ModuleFederationPlugin } = options.webpack.container;

    config.plugins.push(
      new ModuleFederationPlugin({
        name: 'host',
          filename: 'static/chunks/remoteEntry.js',
        remotes: {
          remote: "remote@http://localhost:3001/_next/static/chunks/remoteEntry.js",
        },
        exposes: {
        },
        shared: [],

      }),
    );
    return config;
  },
  images: {
    remotePatterns: [
      {
        hostname: "food-cms.grab.com",
        pathname: "/**/*",
      },
    ],
  },
};

export default nextConfig;

this is next remote config

/** @type {import('next').NextConfig} */


const nextConfig = {
    webpack: (config, {webpack}) => {
        const {ModuleFederationPlugin} = webpack.container;
        config.plugins.push(
            new ModuleFederationPlugin({
                name: "remote",
                filename: "static/chunks/remoteEntry.js",
                exposes: {
                    "./Test": "./app/components/Test",
                },
            }),
        );


        return config;
    },
    images: {
        remotePatterns: [
            {
                hostname: "food-cms.grab.com",
                pathname: "/**/*",
            },
        ],
    },
};

export default nextConfig;

I tried change publicPath but it still work as expected