Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: MF breaks the asset path when more than one sub path #2482

Closed
XavierLeTohic opened this issue May 31, 2024 · 15 comments
Closed

[Bug]: MF breaks the asset path when more than one sub path #2482

XavierLeTohic opened this issue May 31, 2024 · 15 comments
Labels
🐞 bug Something isn't working

Comments

@XavierLeTohic
Copy link

XavierLeTohic commented May 31, 2024

Version

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1
    Memory: 41.70 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 125.0.6422.141
    Safari: 17.4.1
  npmPackages:
    @rsbuild/core: ^0.7.1 => 0.7.1 
    @rsbuild/plugin-react: ^0.7.1 => 0.7.1

Details

When setting moduleFederation.options and reloading with more than one sub path (.i.e /sub/path) Rsbuild inject assets without the prefix / even setting output.assetPrefix: "/" resulting in a white page.

Commenting or removing the whole moduleFederation from rsbuild config and everything works well.

See the attached Codesandbox and repository to reproduce.

Reproduce link

https://codesandbox.io/p/github/XavierLeTohic/rsbuild-mf-asset-path/main

Reproduce Steps

The repo of the codesandbox is here:

https://github.com/XavierLeTohic/rsbuild-mf-asset-path

To reproduce:

  1. Clone
  2. npm install or yarn install
  3. npm run dev or yarn dev
  4. On http://localhost:5050/example everything will work as expected if you reload
  5. Go to http://localhost:5050/example/sub/path and reload it will be broken
  6. Comment the whole module federation in rsbuild.config.ts and try to reload it'll work
@XavierLeTohic XavierLeTohic added the 🐞 bug Something isn't working label May 31, 2024
@chenjiahan
Copy link
Member

output.assetPrefix is for production build, can you try the dev.assetPrefix config?

Note that when you use moduleFederation.options, Rsbuild will set the default value of Rspack's output.publicPath configuration to 'auto', this is recommended by MF team.

@XavierLeTohic
Copy link
Author

dev.assetPrefix helped me discover that the reason why it's not working it's that it does not find assets using rsbuild dev and with module federation no matter the prefix I use, I updated the Codesandbox to reproduce, any idea?

Note that output.publicPath does not exists according to the types in 0.7.1 even tho it's mentioned in the documentation.

Screenshot 2024-06-03 at 10 14 07
Screenshot 2024-06-03 at 10 26 34

@chenjiahan
Copy link
Member

output.publicPath is a config of Rspack, you can use Rsbuild's tools.rspack to configure it.

@ScriptedAlchemy
Copy link
Contributor

Is public path set to auto?

@XavierLeTohic
Copy link
Author

Was fixed in dev by setting config.output.publicPath = '/' since config.output.publicPath = 'auto' still break the injection of assets when more than one sub path is used and the page is reloaded.

Updated the codesandbox to demo when it fails with auto -> https://codesandbox.io/p/github/XavierLeTohic/rsbuild-mf-asset-path/main

@imzisy
Copy link

imzisy commented Jun 5, 2024

I tried to change publicPath to / but it is not working for the host app.

@XavierLeTohic
Copy link
Author

XavierLeTohic commented Jun 5, 2024

I tried to change publicPath to / but it is not working for the host app.

Did you setup MF via appendPlugins like below?

tools: {
		rspack: (config, { appendPlugins }) => {
			config.output.publicPath = "/";

			appendPlugins([
				new ModuleFederationPlugin({ // ...my options })
			]);
		},
	},

@imzisy
Copy link

imzisy commented Jun 5, 2024

I tried to change publicPath to / but it is not working for the host app.

Did you setup MF via appendPlugins like below?

tools: {
		rspack: (config, { appendPlugins }) => {
			config.output.publicPath = "/";

			appendPlugins([
				new ModuleFederationPlugin({ // ...my options })
			]);
		},
	},

I'm using the v1 moduleFederation.options .

@XavierLeTohic
Copy link
Author

No certain but I think you can find the plugin of the 1.5 from @rspack/core's container

@nate-summercook
Copy link

maybe related to #2747 ?

@imzisy
Copy link

imzisy commented Jul 4, 2024

To resolve this issue, upgrade to the latest version of Module Federation.

@XavierLeTohic
Copy link
Author

XavierLeTohic commented Jul 4, 2024

@imzisy this issue also happen with the built-in module federation of rsbuild, not only using the external plugin @module-federation/enhanced/rspack

@XavierLeTohic
Copy link
Author

After upgrading to ^1.0.0-alpha.6 it fixed the issue using tools.rspack but the issue remain with the built-in moduleFederation.options

@qmakani
Copy link
Contributor

qmakani commented Sep 21, 2024

this doesn't seem like an issue anymore. should be safe to close it?

@XavierLeTohic
Copy link
Author

Fixed on the latest versions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

6 participants