Skip to content

[Bug]: Importing federated module from remote MFE where publicPath=/, Storybook attempts to load remote chunks from its own domain #365

@Romasato

Description

@Romasato

Version

System:
    OS: macOS 15.7.1
    CPU: (14) arm64 Apple M4 Pro
    Memory: 131.22 MB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 141.0.7390.122
    Edge: 141.0.3537.85
    Firefox: 142.0.1
    Safari: 18.6
  npmPackages:
    storybook-react-rsbuild: ^2.1.2 => 2.1.2

Details

Hi there,

Having the issue as per title, but a bit more context below.

Context

We have federated setup with container MFE and then a few other non-container MFEs, all using RSBuild/RSPack and ModulesFederation plugin.

In one of those other MFEs I've set up Storybook with storybook-react-rsbuild framework etc. to render stories of components which underneath use federated remote components (from container and from other federated MFEs).

One of the federated modules is imported from container MFE.

  • Container domain: https://localhost:8001/
  • My MFE domain: https://localhost:6006/

In Storybook MFE rsbuild.config.ts is configured with ModuleFederationPlugin and its remotes are pointing to full domains for remote MFEs, i.e.

remotes: {
  container: "container@https://localhost:8001/remoteEntry.js",
  ...
}

The problem

  • Storybook builds fine.
  • The remoteEntry.js files of remote MFEs get discovered and loaded fine.

The problem surfaces when attempting to load Storybook stories of a component that is importing from container MFE.

Container MFE in its mf-manifest.json has publicPath defaulting to /. Storybook build picks up on that and then attempts to load container chunks from Storybook domain, resulting in 404s:

https://localhost:6006/static/js/async/container_662-4affdef1.js

Image

but should be loading the container_* chunks from container MFE domain:

https://localhost:8001/static/js/async/container_662-4affdef1.js

Our other non-container MFEs have MF plugin configured with publicPath='auto', so do not exhibit the same issue, but as per below, for container MFE we can't use publicPath='auto'.

Attempted solutions

  1. Tried changing publicPath='auto' in container MFE's rsbuild.config.ts. But that results in a problem where loading directly URLs with subpaths (i.e. <CONTAINER_DOMAIN>/pathA/pathB/C/D) does not work anymore - as container then attempts to load chunks from the subpath, but should be loading it from / instead.
  2. Attempted to use ModuleFederationPlugin.getPublicPath() runtime function string to figure dynamically the path, but not an option, as container should not be and is not aware about where it is used or where its modules are loaded from (either Storybook or some other context).

Possible Solutions?

In my view, Storybook should always use full domain of remote MFE when attempting to load its chunks, i.e. for a remote MFE's chunks it should use the same domain where it loaded remote MFE's mf-manifest.json or remoteEntry.js from. But maybe there are side-effects to this approach I am unaware of?

Reproduce link

Reproduce Steps

Set up two MFEs:

  • MFE A where ModuleFederationPlugin is configured with publicPath=/.
  • MFE B with Storybook, where components import federated modules from remote MFE A.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions