Module not available for eager consumption

Posted 19 September 2024


We've been expanding our use of Module Federation to some of our older applications, encountering some issues along the way with projects using older versions of Babel.

Adding a bootstrap file usually ensures that the federated module has loaded before it's used, an approach I described in a previous post. However, in one of our applications, we were still seeing the error:

Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react

The team had added a bootstrap file with a dynamic import to allow Webpack to code-split the rest of the bundle. The project was already using the latest version of @babel/preset-env, so there weren't any extra steps to support the syntax.

After some debugging I found that Webpack wasn't code splitting at all. The issue was that @babel/plugin-transform-dynamic-import transforms import() expressions so Webpack cannot use them to code split. This plugin should automatically be disabled when using @babel/preset-env, but in this case it wasn't.

You can configure @babel/preset-env to disable this plugin:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": 3,
        "exclude": ["proposal-dynamic-import"]
      }
    ]
  ]
}

This allowed Webpack to code-split and fixed the error. However the root cause was the project was using babel-loader@7.1.5 - upgrading to the latest version fixed the issue without needing to explicitly disable the plugin.


Related posts

Delay using a federated module

Published

Ensure federated module has loaded before using it

Dynamically load remoteEntry.js files

Published

Control loading Webpack Module Federation remoteEntry.js files to improve peformance

Adopting a micro-frontend architecture

Published

Supporting scaleable web application development with micro-frontends


Thanks for reading

I'm Alex O'Callaghan and this is my personal website where I write about software development and do my best to learn in public. I currently work at Mintel as a Principal Engineer working primarily with React, TypeScript & Python.

I've been leading one of our platform teams, first as an Engineering Manager and now as a Principal Engineer, maintaining a collection of shared libraries, services and a micro-frontend architecture.