Async Startup in Module Federation

Sep 5, 2024

We're excited to announce a new experimental feature: experiments.asyncStartup = true.

This release introduces asynchronous startup, enabling automatic async initialization for Module Federation entrypoints.

🚀 Key Features

Automatic Async Initialization

With async startup enabled, dynamic imports (import()) at the top of your app are no longer required. All entrypoints will now initialize asynchronously by default. This means:

  • No more eager errors
  • No need for "async boundaries" in userland code
  • Automatic handling of async initialization
NOTE

This only affects entry point initialization. You can still use dynamic imports normally throughout your application, including for importing remote modules. This feature doesn't change or limit how dynamic imports work in your code.

TIP

Note: Asynchronous entrypoints will always export a promise. This is particularly relevant if you're manually requiring a bundled entrypoint or exposing something like a UMD library to the global scope.

Before & After Comparison

See how the new async behavior simplifies entrypoints. Click on the "Before" and "After" tabs to see the difference.

Before
After
// entrypoint
import('./bootstrap.js')

// bootstrap.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
<React.StrictMode>
  <App />
</React.StrictMode>,
);

Important Notes

When using async startup:

  • All entrypoints initialize asynchronously by default
  • Exports from entrypoints will be promises that resolve to the actual exports
  • No manual async boundaries or dynamic imports needed
  • Eager consumption errors are automatically prevented through async initialization

This feature simplifies Module Federation setup by removing the need for manual async handling while ensuring proper initialization of federated modules.