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
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
- 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.
- 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.
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.2Details
Hi there,
Having the issue as per title, but a bit more context below.
Context
We have federated setup with
containerMFE 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-rsbuildframework etc. to render stories of components which underneath use federated remote components (fromcontainerand from other federated MFEs).One of the federated modules is imported from
containerMFE.https://localhost:8001/https://localhost:6006/In Storybook MFE
rsbuild.config.tsis configured withModuleFederationPluginand itsremotesare pointing to full domains for remote MFEs, i.e.The problem
remoteEntry.jsfiles of remote MFEs get discovered and loaded fine.The problem surfaces when attempting to load Storybook stories of a component that is importing from
containerMFE.Container MFE in its
mf-manifest.jsonhaspublicPathdefaulting to/. Storybook build picks up on that and then attempts to loadcontainerchunks from Storybook domain, resulting in 404s:but should be loading the
container_*chunks fromcontainerMFE domain: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 usepublicPath='auto'.Attempted solutions
publicPath='auto'incontainerMFE'srsbuild.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.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.jsonorremoteEntry.jsfrom. But maybe there are side-effects to this approach I am unaware of?Reproduce link
Reproduce Steps
Set up two MFEs:
Awhere ModuleFederationPlugin is configured withpublicPath=/.Bwith Storybook, where components import federated modules from remote MFEA.