Module federation requesting remote component from wrong origin

[leolima]

Describe the bug

Using Module Federation plugin for nextjs.

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

It should be http://localhost:3000/v2/_next/static/chunks/__federation_expose_Hello.js

There is some issue with module-federation when nextjs 'basePath' is populated.

check out the 'nextjs.config.js' of (calc http://localhost:3001)

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: {},
        }),
      );
    }

    return config;
  },
};

and 'nextjs.config.js' of (host http://localhost:3000)

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

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

    return config;
  },
};

I tried to set an 'output.publicPath' in webpack but it didn't work

 return {
   ...config,
   output: {
       publicPath: 'http://localhost:3000/v2/_next/'
   }
 };

Reproduction

https://github.com/leolima/bug-mf/

Used Package Manager

yarn

System Info

System:
    OS: Linux 6.8 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 6.78 GB / 15.36 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.18.2/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
    pnpm: 9.12.0 - ~/.nvm/versions/node/v18.18.2/bin/pnpm
  Browsers:
    Chrome: 127.0.6533.72
    Chromium: 129.0.6668.58

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[ScriptedAlchemy]

publicPath: auto

or use https://module-federation.io/configure/getpublicpath.html

[leolima]

@ScriptedAlchemy

I think the default is 'auto'.

and I tried with 'getPublicPath' and webpack's 'output.publicPath'.

But both failed.

leolima/bug-mf@d52485e

and

leolima/bug-mf@7f91179

[ScriptedAlchemy]

Does it work if you don't set basepath on both apps.

[leolima]

@ScriptedAlchemy Yes, it works perfectly.

But it is a very specific scenario where I need to deploy to this subpath.
And nextjs adjusts the url of the assets beautifully with the basePath. all requests from the subpath are delivered correctly.

[ScriptedAlchemy]

Base path is not supported

[leolima]

@ScriptedAlchemy but can it be considered in the next versions?

[leolima]

Found the solution.

check how to correctly configure publicPath:

module.exports = {
  basePath: '/calc',
  webpack(config, options) {
    config.output.publicPath = 'http://localhost:3001/calc/_next/'
    
    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: {},
        }),
      );
    }

    return config;
  },
};

[doerme]

publicPath: auto

or use https://module-federation.io/configure/getpublicpath.html

when does the federation runtime support the getpublicpath configuration option?

[ScriptedAlchemy]

Public path is supported now

[doerme]

Public path is supported now

There is no relevant instructions in https://module-federation.io/guide/basic/runtime.html