javascriptwebpackrsbuildnextjs-mfmodule-federation-enhanced

Use component exposed by @module-federation/rsbuild-plugin in nextjs


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.


Solution

  • Fixed by adding this to the remote app config:

      tools: {
        rspack: {
          output: {
            uniqueName: 'remote',
            publicPath: 'auto',
          },
        },
      },