---
title: enableAsyncEntry
---

# source.enableAsyncEntry

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

This option is used for webpack 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

import ModuleFederation from '@site-docs-en/components/module-federation.mdx';

<ModuleFederation />

## 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).

:::
