Skip to main content
Version: 3x

Function: importModule


importModule\<Exports>(containerName, module, scope?): Promise\<Exports>

Dynamically imports module from a Module Federation container. Similar to import('file'), but specific to Module Federation. Calling importModule will create an async boundary.

Container will be evaluated only once. If you use importModule for the same container twice, the container will be loaded and evaluated only on the first import.

Under the hood, importModule will call ScriptManager.shared.loadScript(containerName). This means, a resolver must be added with ScriptManager.shared.addResolver(...) beforehand and provided proper resolution logic to resolve URL based on the containerName.

Type parameters



NameTypeDefault valueDescription
containerNamestringundefinedName of the container - should be the same name provided to webpack.container.ModuleFederationPlugin in
modulestringundefinedFull name with extension of the module to import from the container - only modules exposed in exposes in webpack.container.ModuleFederationPlugin can be used.
scopestring'default'Optional, scope for sharing modules between containers. Defaults to 'default'.



Exports of given module from given container.


import * as React from 'react';
import { Federated } from '@callstack/repack/client';

const Button = React.lazy(() => Federated.importModule('my-components', './Button.js'));

const myUtil = await Federated.importModule('my-lib', './myUtil.js');

Defined in