#Modern.js

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 the @module-federation/modern-js plugin to help users better utilize Module Federation within Modern.js.

#Supports

• modern.js ^2.56.1
• 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

You can install the plugin using the following commands:

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

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';

export default defineConfig({
  dev: {
    port: 3005,
  },
  runtime: {
    router: true,
  },
  // 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';
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.

The Modern.js plugin re-exports @module-federation/bridge-react from @module-federation/modern-js/react, so you don't need to install it separately.

#API

@module-federation/modern-js re-exports @module-federation/modern-js/runtime from the runtime subpath. You can use @module-federation/modern-js/runtime to get the MF Runtime.Runtime。

#createRemoteComponent Deprecated

#Migration Guide

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

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

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 Guide

Same as createRemoteComponent#migration-guide

#Configuration

#ssr

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

@module-federation/modern-js 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';

// https://modernjs.dev/en/configure/app/usage
export default defineConfig({
  dev: {
    port: 3050,
  },
  runtime: {
    router: true,
  },
  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.