> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# source.enableAsyncEntry

- **Type:** `boolean`
- **Default:** `false`

This option is used for Rspack Module Federation scenario.

When this option is enabled, Modern.js will wrap the automatically generated entry files with dynamic import (Asynchronous Boundaries), allowing page code to consume remote modules generated by Module Federation.

## Background

Module Federation (MF) is a technology solution that allows multiple JavaScript applications to share code and resources. Similar to microservices architecture on the server side, it allows you to split large applications into multiple independent smaller applications that can be developed, tested, and deployed independently, while dynamically loading modules from other applications at runtime.

Module Federation solves the problem of code duplication across multiple frontend applications. In the traditional approach, if multiple applications need to use the same components or utility functions, you would need to duplicate this code in each application, leading to code duplication, high maintenance costs, and larger application sizes. With Module Federation, you can place common code in one application and have other applications load it dynamically as needed, enabling code sharing and reducing duplication.

Module Federation 2.0 supports [Rspack](https://rspack.rs/) build tools, and provides enhanced features such as dynamic type hints, Manifest, Federation Runtime, runtime plugin system, and Chrome Devtools support for better development experience and debugging capabilities. You can visit the [Module Federation official documentation](https://module-federation.io/) to learn more.

Modern.js provides an example project for Module Federation. Please refer to [module-federation-examples - modernjs](https://github.com/module-federation/module-federation-examples/tree/db5bdbeee56f779999a2c591fc553eb94eb20b36/modernjs).

## Example

First, enable this option in the configuration file:

```ts title="modern.config.ts"
export default defineConfig({
  source: {
    enableAsyncEntry: true,
  },
});
```

Then run the `dev` or `build` command, and you will see that the files automatically generated by Modern.js have the following structure:

```bash
node_modules
  └─ .modern-js
     └─ main
        ├─ bootstrap.jsx  # asynchronous entry file
        ├─ index.js      # real entry code
        └─ index.html
```

The contents of `bootstrap.js` are as follows:

```js
import('./index.jsx');
```

At this point, you can consume any remote module in the current page.

:::info
Modern.js does not have ModuleFederationPlugin plugin built in. Please configure the ModuleFederationPlugin yourself via [tools.bundlerChain](/configure/app/tools/bundler-chain.md).

:::