#Getting Started

To use Module Federation in Modern.js, we recommend using the official plugin @module-federation/modern-js.

This section will introduce how to set up both producer and consumer applications using the official plugin. First, create two applications by following the Modern.js Quick Start.

#Install the Plugin

After creating the applications, install the plugin for both projects:

npm add @module-federation/modern-js

yarn add @module-federation/modern-js

pnpm add @module-federation/modern-js

bun add @module-federation/modern-js

deno add npm:@module-federation/modern-js

#Register the Plugin

After installing the plugin, you need to register it in the modern.config.js file:

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

export default defineConfig({
  plugins: [appTools(), moduleFederationPlugin()],
});

#Export Modules from Producer

Next, modify the producer's code to export the Module Federation module.

Create the src/components/Button.tsx file and export a Button component:

import React from 'react';

export const Button = () => {
  return <button type="button">Remote Button</button>;
};

Then, add the module-federation.config.ts file at the project root to configure the Module Federation module's name, shared dependencies, and exports:

import { createModuleFederationConfig } from '@module-federation/modern-js';

export default createModuleFederationConfig({
  name: 'remote',
  manifest: {
    filePath: 'static',
  },
  filename: 'static/remoteEntry.js',
  exposes: {
    './Button': './src/components/Button.tsx',
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
  },
});

Additionally, modify modern.config.ts to provide a development environment port for the producer, allowing the consumer to access the producer's resources through this port:

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

export default defineConfig({
  dev: {
    port: 3051,
  },
  plugins: [appTools(), moduleFederationPlugin()],
});

#Use Modules in Consumer

Now, modify the consumer's code to use the module exported by the producer.

Add the module-federation.config.ts file at the project root to configure the Module Federation module's name, shared dependencies, and the remote module to use:

import { createModuleFederationConfig } from '@module-federation/modern-js';

export default createModuleFederationConfig({
  name: 'host',
  remotes: {
    remote: 'remote@http://localhost:3051/static/mf-manifest.json',
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
  },
});

mf-manifest.json is the file produced by the producer after packaging, containing all the information about the modules exported by the producer.

Create a new route file src/routes/remote/page.tsx and import the producer module:

import React, { useState, Suspense } from 'react';
import { Button } from 'remote/Button';

const Index = (): JSX.Element => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Button />
      </Suspense>
    </div>
  );
};

export default Index;

At this point, importing remote/Button will result in a type error because the local environment doesn't have the type for the remote module. Module Federation 2.0 provides type hints, which will automatically generate type definitions for remote modules during the producer's build and download them during the consumer's build.

To ensure the types take effect, add a new path in tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "*": ["./@mf-types/*"]
    }
  }
}

{
  remotes: {
    [remoteAlias]: '[remoteModuleName]@[URL_ADDRESS]',
  }
}

#Start the Applications

Now, both the producer and consumer applications are set up. You can run modern dev locally to start both applications.

Once started, the imports of the producer's modules in the consumer will no longer throw errors, and the types will be downloaded to the consumer application.

Access http://localhost:8080/remote, and you will see that the page includes the Button component from the producer's remote module.

We can also execute modern serve locally to simulate the production environment.

Because the Module Federation plugin will automatically read Modern.js's output.assetPrefix configuration as the access address for remote modules, and this value defaults to / after building in the production environment.

If we want to simulate the production environment in local, but not configure output.assetPrefix, consumers will pull the entry file of the remote module from their own domain. So We can add the following configuration:

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({
  server: {
    port: 3051,
  },
  output: {
    // Now this configuration is only used in the local when you run modern serve command.
    // If you want to deploy the application to the platform, use your own domain name.
    // Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
    assetPrefix: 'http://127.0.0.1:3051',
  },
  plugins: [appTools(), moduleFederationPlugin()],
});

Now, in the producer, run modern build && modern serve, and in the consumer, run modern build && modern serve to simulate the production environment locally and access the remote modules.

You can refer to this example: Modern.js & Module Federation Basic Example.

#Related Documentation

• Module Federation Official Documentation