I have exactly the same problem like in this question but the solution does't work for me :(. The difference in my case is that my remote component is exposed by @module-federation/rsbuild-plugin.
Host configuration (next.config.ts):
const { NextFederationPlugin } = require('@module-federation/nextjs-mf');
module.exports = {
webpack(config, options) {
config.output.publicPath = 'auto'
if (!options.isServer) {
config.plugins.push(
new NextFederationPlugin({
name: 'host',
filename: 'static/chunks/remoteEntry.js',
remotes: {
remote: 'remote@http://localhost:3001/remote.js',
},
}),
);
}
return config;
},
};
Remote configuration (rsbuild.config.ts):
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin'
import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
export default defineConfig({
plugins: [
pluginReact(),
pluginModuleFederation({
name: 'remote',
library: { type: 'var', name: 'remote' },
filename: 'remote.js',
exposes: {
'./Button': './src/Button.tsx',
},
shared: {
react: {
singleton: true,
version: '0',
requiredVersion: false,
},
'react-dom': {
requiredVersion: false,
singleton: true,
version: '0',
},
},
}),
],
server: {
port: 3001,
}
It gets the chunk for the remote component from the host origin:
GET http://localhost:3000/static/js/async/__federation_expose_Button.e9dde250.js net::ERR_ABORTED 404 (Not Found)
Any ideas, please? Thank you.
Fixed by adding this to the remote app config:
tools: {
rspack: {
output: {
uniqueName: 'remote',
publicPath: 'auto',
},
},
},