Module not available for eager consumption

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.