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#

Module Federation (MF) is a feature of Webpack. It allows a JavaScript application to dynamically load code from another application, and in the process, share dependencies. If an application consuming a federated module does not have a dependency needed by the federated code, Webpack will download the missing dependency from that federated build origin.

This allows for the creation of micro-frontend-style applications, where multiple systems can share code and be dynamically updated without having to rebuild the entire application.

Modern.js provides an example project for Module Federation. Please refer to module-federation-examples - modernjs.

You can also read the webpack Module Federation documentation to learn more concepts.

Example#

First, enable this option in the configuration file:

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:

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:

import('./index.jsx');

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