runtimePlugins

Type: string[] | Array<[string, Record<string, unknown>]>
Required: No
Default: undefined

The runtimePlugins configuration is used to add additional plugins needed at runtime. The value can be:

A string representing the path to the specific plugin (absolute/relative path or package name)
An array where each element can be either a string or a tuple with [string path, object options]

You can learn more about how to develop runtimePlugin details by visiting the Plugin System.

Once set, runtime plugins will be automatically injected and used during the build process.

Examples

Basic usage: To create a runtime plugin file, you can name it custom-runtime-plugin.ts:

custom-runtime-plugin.ts

import { ModuleFederationRuntimePlugin } from '@module-federation/enhanced/runtime';

export default function (): ModuleFederationRuntimePlugin {
  return {
    name: 'custom-plugin-build',
    beforeInit(args) {
      console.log('[build time inject] beforeInit: ', args);
      return args;
    },
    beforeLoadShare(args) {
      console.log('[build time inject] beforeLoadShare: ', args);
      return args;
    },
  };
}

Then, apply this plugin in your build configuration:

rspack.config.ts

const path = require('path');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        'manifest-provider':
          'manifest_provider@http://localhost:3011/mf-manifest.json',
      },
      runtimePlugins: [path.resolve(__dirname, './custom-runtime-plugin.ts')],
    }),
  ],
};

With options: You can also provide options to runtime plugins by using a tuple format:

rspack.config.ts

const path = require('path');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        'manifest-provider':
          'manifest_provider@http://localhost:3011/mf-manifest.json',
      },
      runtimePlugins: [
        path.resolve(__dirname, './custom-runtime-plugin.ts'),
        [
          path.resolve(__dirname, './another-plugin.ts'),
          {
            debug: true,
            timeout: 5000,
            customConfig: 'value'
          }
        ]
      ],
    }),
  ],
};

The plugin can then access these options:

another-plugin.ts

import { ModuleFederationRuntimePlugin } from '@module-federation/enhanced/runtime';

export default function (options: any): ModuleFederationRuntimePlugin {
  console.log('Plugin options:', options);

  return {
    name: 'another-plugin',
    beforeInit(args) {
      if (options.debug) {
        console.log('[debug] beforeInit: ', args);
      }
      return args;
    },
  };
}

#runtimePlugins

runtimePlugins