[Bug]: Module Federation breaks publicPath / assetsPrefix

[danantal]

Version

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

Details

Adding an empty module federation configuration to a basic RSBuild app breaks the publicPath / assetsPrefix by removing the leading slash.

moduleFederation: {
  options: {
    name: 'app',
  }
}

With moduleFederation:

Without moduleFederation:

Reproduce link

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

Reproduce Steps

1. Run pnpm i
2. Run pnpm dev
3. Navigate to localhost:3000/foo/

Expected: page loads correctly
Actual: blank page due to assets referenced incorrectly

If you comment out the moduleFederation configuration in rsbuild.config.ts then it works as expected.

[danantal]

It seems that this is a problem that occurs due to the defaults that rsbuild applies when configuring module federation. According to docs, when using module federation it does set output.PublicPath to 'auto'.

However, even with an explicit server.base, and dev.assetsPrefix / output.assetsPrefix, the underlying configuration passed to rspack.output.publicPath is still 'auto'...

Without module federation:

With module federation:

[chenjiahan]

As mentioned in the documentation, Rsbuild set the default value of Rspack's output.publicPath configuration to 'auto' when using moduleFederation.options, see https://rsbuild.dev/config/module-federation/options#introduction

I have tried the reproduction, and considering that there is no foo.html page in this demo, we should visit localhost:3000/ instead of localhost:3000/foo/ to get the correct response from the dev server.

[NikaBuligini]

@chenjiahan Let's assume we're using a single page application that has a client side routing and the server always returns the same index.html for any page client navigates to. The server is configured to serve static assets only from localhost:3000/static

• User navigates to localhost:3000/
• Browser loads localhost:3000/static/js/index.js
• Then the user clicks on a link to navigate to a different route (/foo/bar) using history API
• Web app still works fine because it was a client side routing, URL was changed to localhost:3000/foo/bar
• Now user reloads the page
• Browser makes a request to localhost:3000/foo/bar
• This time index.js file is loaded from localhost:3000/foo/static/js/index.js instead of localhost:3000/static/js/index.js and it breaks the app because the server doesn't serve asset files from /foo/static

[danantal]

I've tried to keep it simple, but if I add an SPA router and a path /foo and use a deeplink to navigate, the app won't load as NikaBuligini explained above.

[chenjiahan]

Thanks for the info. I have discussed this with @2heal1 from the Module Federation team and I will be submitting some patches to fix this issue soon.

[danantal]

Thanks a lot for the quick reactions @chenjiahan @2heal1

[siddjellali]

@chenjiahan Let's assume we're using a single page application that has a client side routing and the server always returns the same index.html for any page client navigates to. The server is configured to serve static assets only from localhost:3000/static

• User navigates to localhost:3000/
• Browser loads localhost:3000/static/js/index.js
• Then the user clicks on a link to navigate to a different route (/foo/bar) using history API
• Web app still works fine because it was a client side routing, URL was changed to localhost:3000/foo/bar
• Now user reloads the page
• Browser makes a request to localhost:3000/foo/bar
• This time index.js file is loaded from localhost:3000/foo/static/js/index.js instead of localhost:3000/static/js/index.js and it breaks the app because the server doesn't serve asset files from /foo/static

I'm facing the same issue: the project works fine when I run it with rsbuild preview (I can refresh my screen without problems), but it doesn't work when I serve it with server ./dist or inside a Docker container with Nginx (I get a 404 page). Do you have any explanation?

Please reopen @chenjiahan

[chenjiahan]

If Rsbuild preview works fine but Ngnix does not, it sounds like an issue with the Ngnix configuration, not Rsbuild. If you consider it to be a problem with Rsbuild, can you give more details and the expected behaviour?

[siddjellali]

It was indeed a ngnix issue.
Thanks everyone and apologize :)