# Modern.js
[Modern.js](https://modernjs.dev/guides/get-started/introduction.html) 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-v3` 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)](https://github.com/module-federation/core/tree/main/apps/modernjs-ssr)
- [Component-Level Data Fetch](https://github.com/module-federation/core/tree/main/apps/modern-component-data-fetch)
## Quick Start
### Installation
You can install the plugin using the following commands:
```sh [npm]
npm add @module-federation/modern-js-v3 --save
```
```sh [yarn]
yarn add @module-federation/modern-js-v3 --save
```
```sh [pnpm]
pnpm add @module-federation/modern-js-v3 --save
```
```sh [bun]
bun add @module-federation/modern-js-v3 --save
```
### Apply Plugin
Apply this plugin in the `plugins` section of `modern.config.ts`:
```ts title="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:
```ts title="module-federation.config.ts"
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)
:::info Note
For a better performance experience, Module Federation X Modern.js SSR only supports stream 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](/guide/basic/data-fetch.md).
The Modern.js plugin re-exports `@module-federation/bridge-react` from `@module-federation/modern-js-v3/react`, so you don't need to install it separately.
## API
`@module-federation/modern-js-v3` re-exports `@module-federation/modern-js-v3/runtime` from the `runtime` subpath. You can use `@module-federation/modern-js-v3/runtime` to get the MF Runtime.Runtime。
### createRemoteComponent Deprecated
::: danger
This API has been deprecated. Please use [createLazyComponent](/practice/bridge/react-bridge/load-component.md#what-is-createlazycomponent) instead.
:::
#### 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.
```diff
- 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/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
::: danger
This API has been deprecated. Please use [createLazyComponent](/practice/bridge/react-bridge/load-component.md#createlazycomponent-vs-createremoteappcomponent) instead.
:::
#### Migration Guide
Same as [createRemoteComponent#migration-guide](#migration-guide)
## 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.
```ts title='modern.config.ts'
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](https://www.npmjs.com/package/@module-federation/modern-js) plugin for using Module Federation in Modern.js v2 projects.
