next.jswebpack-module-federationnextjs-mf

Module federation requesting remote component from wrong origin

I'm using Module federation plugin for nextjs.

I have 2 applications. (host and calc) When I try access the calc (http://localhost:3001) on browser, using a remote component from host (http://localhost:3000/). The browser is requesting the source from wrong origin.

enter image description here

enter image description here

check out my 'nextjs.config.js'

const { NextFederationPlugin } = require('@module-federation/nextjs-mf');
const path = require('path');

module.exports = {
  basePath: '/calc',
  webpack(config, options) {
    if (!options.isServer) {
      config.plugins.push(
        new NextFederationPlugin({
          name: 'calc',
          filename: 'static/chunks/remoteEntry.js',
          remotes: {
            host: `host@http://localhost:3000/v2/_next/static/chunks/remoteEntry.js`,
          },
          exposes: {},
          shared: {},
          publicpath: 'auto',
        }),
      );
    }

    return config;
  },
};
Solution

  • You have to set publicPath to auto in you Webpack configuration (in your calc app) so that subsequent requests made by remoteEntry.js are made from the original origin (in you case :3000).

      webpack(config, options) {
     config.output.publicPath = 'auto'