---
sidebar_label: 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 Imports (Asynchronous Boundaries), allowing page code to consume remote modules generated by Module Federation.

## Background

If you are not familiar with webpack Module Federation, please read the [Module Federation documentation](https://webpack.js.org/concepts/module-federation/).

## 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  #  real entry code
        ├─ index.js      # asynchronous entry file
        └─ index.html
```

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

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

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

:::info
Modern.js does not have webpack's ModuleFederationPlugin plugin built in. Please configure the ModuleFederationPlugin yourself via [tools.webpackChain](/configure/app/tools/webpack-chain).

:::
