#Modern.js Integration Overview

Modern.js is a progressive web development framework based on React. Internally at ByteDance, Modern.js supports the development of thousands of web applications.

The Module Federation team works closely with the Modern.js team and provides both @module-federation/modern-js-v3 and @module-federation/modern-js to help users use Module Federation in Modern.js.

We recommend upgrading to Modern.js v3 and using @module-federation/modern-js-v3 first.

#Supports

• Modern.js v3: use @module-federation/modern-js-v3 (recommended)
• Modern.js v2.56.1 and later: use @module-federation/modern-js
• Includes Server-Side Rendering (SSR)

We highly recommend referencing these applications, which showcases the best practices for integrating Modern.js with Module Federation:

• Server-Side Rendering (SSR)
• Component-Level Data Fetch

#Quick Start

#Installation

For Modern.js v3, install @module-federation/modern-js-v3:

npm add @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

If you are still using Modern.js v2, install @module-federation/modern-js:

npm add @module-federation/modern-js --save

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

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

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

#Apply Plugin

The following example uses Modern.js v3. If you are still using Modern.js v2, replace @module-federation/modern-js-v3 with @module-federation/modern-js.

Apply this plugin in the plugins section of modern.config.ts:

import { appTools, defineConfig } from '@modern-js/app-tools';
import { moduleFederationPlugin } from '@module-federation/modern-js-v3';

export default defineConfig({
  // moduleFederationPlugin is a plugin for modern.js that can make certain modifications to the build/runtime
  plugins: [appTools(), moduleFederationPlugin()],
});

Then, create the module-federation.config.ts file and add the required configuration:

import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
export default createModuleFederationConfig({
  name: 'host',
  remotes: {
    remote: 'remote@http://localhost:3006/mf-manifest.json',
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
  },
});

#Server-Side Rendering (SSR)

There is no difference in using Module Federation in SSR scenarios compared to CSR scenarios; developers can continue with their existing development practices.

#Component-Level Data Fetch

See Data Fetching.

In Modern.js v3, component-level data fetching has been built into the @module-federation/modern-js-v3 plugin, so you no longer need to install @module-federation/bridge-react separately to use it.

All data fetching APIs are placed in @module-federation/modern-js-v3/data-fetch. You can import and use them from this subpath.

#Runtime API

All Module Federation Runtime APIs are placed in @module-federation/modern-js-v3/runtime. You can import and use them from this subpath.

#createRemoteComponent Deprecated

The parameters for createRemoteComponent and createLazyComponent are identical. The only difference is that createLazyComponent needs to be called through an instance after registering the plugin.

- import { createRemoteComponent } from '@module-federation/modern-js-v3/runtime';
+ import { getInstance } from '@module-federation/modern-js-v3/runtime';
+ import { lazyLoadComponentPlugin } from '@module-federation/modern-js-v3/data-fetch';

const instance = getInstance();
// After registering the lazyLoadComponentPlugin, the instance will automatically add the createLazyComponent API
instance.registerPlugins([lazyLoadComponentPlugin()]);

- const LazyComponent = createRemoteComponent({
+ const LazyComponent = instance.createLazyComponent({
  loader: () => import('remote/Image'),
  loading: <div>loading...</div>,
  fallback: ({ error }) => {
    console.error(error)
    return <div>fallback</div>;
  },
});

const App: FC = () => {
  return <>
    <LazyComponent />
  </>;
};
export default App;

#createRemoteSSRComponent Deprecated

Migration is the same as createRemoteComponent.

#Configuration

#ssr

• Type: false
• Required: No
• Default value: undefined

@module-federation/modern-js-v3 will automatically add SSR-related build presets based on server.ssr in the modern.js config.

If the current project only needs to load MF in CSR, you can set ssr: false to help with progressive migration.

import { appTools, defineConfig } from '@modern-js/app-tools';
import { moduleFederationPlugin } from '@module-federation/modern-js-v3';

// https://modernjs.dev/en/configure/app/usage
export default defineConfig({

  server: {
    ssr: {
      mode: 'stream',
    },
  },
  plugins: [
    appTools(),
    moduleFederationPlugin({ ssr: false })
  ],
});

#fetchServerQuery

• Type: Record<string, unknown>
• Required: No
• Default: undefined

If a downgrade occurs, an HTTP request will be sent to the server. This configuration can be used to add query parameters to that request.

#Modern.js v2

We recommend using Modern.js v3 as it offers better performance and more comprehensive features. However, we also provide the @module-federation/modern-js plugin for using Module Federation in Modern.js v2 projects.