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;
    },
  };
}