Skip to content

[Bug]: Module Federation - Remote app fails to load when running with a base path #3780

@danantal

Description

@danantal

Version

System:
OS: Windows 11 10.0.22631
CPU: (32) x64 AMD Ryzen 9 3950X 16-Core Processor
Memory: 43.63 GB / 63.92 GB
Browsers:
Edge: Chromium (129.0.2792.89)
Internet Explorer: 11.0.22621.3527
npmPackages:
@rsbuild/core: ^1.0.16 => 1.0.16
@rsbuild/plugin-react: ^1.0.5 => 1.0.5

Details

I have a setup with 2 apps:

  1. Host - running on localhost:3000 with no server base path
  2. Remote - running on localhost:3001/foo/ with a server base path set to /foo

Trying to configure the host app to consume the remote app with the following config:

moduleFederation: {
    options: {
      name: 'host',
      remotes: {
        remote: 'remote@http://localhost:3001/foo/remoteEntry.js',
      },
      shared: {
        ...dependencies,
        react: {
          singleton: true,
          requiredVersion: dependencies['react'],
        },
        'react-dom': {
          singleton: true,
          requiredVersion: dependencies['react-dom'],
        },
      },
    },

The initial request for the remoteEntry.js file succeeds, but it fails when trying to load the dependencies of the remote app. It seems those requests are issued towards the host app port (3000) instead of the remote app port (3001). The network request responds with the html of the host app.

Image

I've checked the code and there is a comment about that being intended though, so that HMR works, but I'm not sure why it then works fine if we remove the server base path of /foo on the remote app (the request is then made to the correct port of 3001).

I've also tried setting the dev client port explicitly, but it still fails.

  dev: {
    client: {
      port: 3001
    }
  },

Reproduce link

https://github.com/danantal/rsbuild-demo

Reproduce Steps

  1. run pnpm i
  2. run pnpm --filter=host dev
  3. run pnpm --filter=remote dev

Expected: page loads correctly
Actual: page fails to load due to incorrect request for the deps of remote app.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions