Guide
Practice
Configuration
Plugins
Showcase
Blog
Ecosystem

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