#Runtime Access

Currently, Module Federation provides two ways to register and load modules:

• One is to declare it in the build plugin (usually in the module-federation.config.ts file)

• The other way is to directly register and load modules through the runtime API.

The two modes are not conflicting and can be used together. You can flexibly choose the module registration method and timing according to your actual scenario.

The differences between registering modules at runtime and registering modules in the build configuration are as follows:

If the build plugin is used, an MF instance will be automatically created and stored in memory when the project starts. You can directly call methods of the MF instance via the .

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

loadRemote('remote1');

If the build plugin is not used, you need to manually create an MF instance before calling the corresponding API.

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

const mf = createInstance({
  name: 'host',
  remotes: [
    {
      name: 'remote1',
      entry: 'http://localhost:2001/vmok-manifest.json',
    },
  ],
});

mf.loadRemote('remote1');

• What is a ModuleFederation instance?

A ModuleFederation instance is an instance of the ModuleFederation class, which contains all the functionality of the ModuleFederation runtime.

You can enter __FEDERATION__.__INSTANCES__ in the console to view the created instances.

#Installation

Different project types should install and import Runtime from different entries. Most projects should install @module-federation/enhanced and import Runtime APIs from @module-federation/enhanced/runtime. If your Modern.js project already uses a Module Federation plugin, import Runtime APIs from the plugin's /runtime entry so the framework plugin and manual Runtime calls use the same Runtime instance.

#@module-federation/enhanced

npm install @module-federation/enhanced --save

yarn add @module-federation/enhanced --save

pnpm add @module-federation/enhanced --save

bun add @module-federation/enhanced --save

import { createInstance, loadRemote } from '@module-federation/enhanced/runtime';

#Modern.js

npm install @module-federation/modern-js-v3 --save

yarn add @module-federation/modern-js-v3 --save

pnpm add @module-federation/modern-js-v3 --save

bun add @module-federation/modern-js-v3 --save

import { createInstance, loadRemote } from '@module-federation/modern-js-v3/runtime';

For Modern.js v2 projects, install @module-federation/modern-js and import Runtime APIs from @module-federation/modern-js/runtime.

#Module Registration

// If use build plugin, you can use `registerRemotes` directly.
import { registerRemotes } from '@module-federation/enhanced/runtime';

registerRemotes([
  {
      name: 'remote1',
      alias: 'remote-1',
      entry: 'http://localhost:3001/mf-manifest.json',
  }
]);

// If not use build plugin, you can create new instance and register remote.
import { createInstance } from '@module-federation/enhanced/runtime';

const mf = createInstance({
  name: 'mf_host',
  remotes: [
    {
      name: 'remote1',
      alias: 'remote-1',
      entry: 'http://localhost:3001/mf-manifest.json',
    }
  ]
});

mf.registerRemotes([
  {
      name: 'remote1',
      alias: 'remote-1',
      entry: 'http://localhost:3001/mf-manifest.json',
  }
]);

#Module Loading

// If use build plugin, you can use `loadRemote` directly.
import { loadRemote } from '@module-federation/enhanced/runtime';
import React from 'react';

export default () => {
  const MyButton = React.lazy(() =>
    loadRemote('remote1').then(({ MyButton }) => {
      return {
        default: MyButton
      };
    }),
  );

  return (
    <React.Suspense fallback="Loading Button">
      <MyButton />
    </React.Suspense>
  );
}

// If not use build plugin, you can create new instance and load remote.
import { createInstance } from '@module-federation/enhanced/runtime';
import React from 'react';

const mf = createInstance({
  name: 'mf_host',
  remotes: [
    {
      name: 'remote1',
      alias: 'remote-1',
      entry: 'http://localhost:3001/mf-manifest.json',
    }
  ]
});

export default () => {
  const MyButton = React.lazy(() =>
    mf.loadRemote('remote1').then(({ MyButton }) => {
      return {
        default: MyButton
      };
    }),
  );

  return (
    <React.Suspense fallback="Loading Button">
      <MyButton />
    </React.Suspense>
  );
}

#Loading Anonymous Modules

// If use build plugin, you can use `loadRemote` directly.
import React from 'react';
import { loadRemote } from '@module-federation/enhanced/runtime';

const RemoteButton = React.lazy(() => loadRemote('provider/button'));
// 也可通过模块别名加载：
// const RemoteButton = React.lazy(() => loadRemote('remotes-1/button'));

export default () => {
  return (
    <React.Suspense fallback="Loading Button">
      <RemoteButton />
    </React.Suspense>
  );
}

// If not use build plugin, you can create new instance and load remote.
import { createInstance } from '@module-federation/enhanced/runtime';
import React from 'react';

// 创建实例
const mf = createInstance({
  name: 'mf_host',
  remotes: [
    {
      name: 'remote1',
      alias: 'remote-1',
      entry: 'http://localhost:3001/mf-manifest.json',
    }
  ]
});

// Use instance api load remote.
const RemoteButton = React.lazy(() => mf.loadRemote('provider/button'));
// Also support use alias to load
// const RemoteButton = React.lazy(() => mf.loadRemote('remotes-1/button'));

export default () => {
  return (
    <React.Suspense fallback="Loading Button">
      <RemoteButton />
    </React.Suspense>
  );
}

#Loading Named Modules

// If use build plugin, you can use `loadRemote` directly.
import React from 'react';
import { loadRemote } from '@module-federation/enhanced/runtime';

export default () => {
  const RemoteButton = React.lazy(() =>
    loadRemote('remote1/button').then(({ RemoteButton }) => {
      return {
        default: RemoteButton
      };
    }),
  );
  return (
    <React.Suspense fallback="Loading Button">
      <RemoteButton />
    </React.Suspense>
  );
}

// If not use build plugin, you can create new instance and load remote.
import { createInstance } from '@module-federation/enhanced/runtime';
import React from 'react';

// 创建实例
const mf = createInstance({
  name: 'mf_host',
  remotes: [
    {
      name: 'remote1',
      alias: 'remote-1',
      entry: 'http://localhost:3001/mf-manifest.json',
    }
  ]
});

export default () => {
  const RemoteButton = React.lazy(() =>
    // Use instance api load remote.
    mf.loadRemote('remote1/button').then(({ RemoteButton }) => {
      return {
        default: RemoteButton
      };
    }),
  );
  return (
    <React.Suspense fallback="Loading Button">
      <RemoteButton />
    </React.Suspense>
  );
}

#Loading Utility Functions

// If use build plugin, you can use `loadRemote` directly.
import React from 'react';
import { loadRemote } from '@module-federation/enhanced/runtime';

// 加载 remote1 expose 的 util
loadRemote<{add: (...args: Array<number>)=> number }>("remote1/util").then((md)=>{
    md.add(1,2);
});

// If not use build plugin, you can create new instance and load remote.
import { createInstance, loadRemote } from '@module-federation/enhanced/runtime';
import React from 'react';

// create instance
const mf = createInstance({
  name: 'mf_host',
  remotes: [
    {
      name: 'remote1',
      alias: 'remote-1',
      entry: 'http://localhost:3001/mf-manifest.json',
    }
  ]
});

mf.loadRemote<{add: (...args: Array<number>)=> number }>("remote1/util").then((md)=>{
    md.add(1,2);
});

#Read Next

• Runtime API: createInstance, loadRemote, registerRemotes, and other runtime APIs.
• Runtime Plugins: extend the runtime loading flow.
• Runtime Hooks: lifecycle hooks available to runtime plugins.