Федерация модулей Webpack не работает с нетерпеливыми общими библиотеками

Я изучал функцию объединения модулей Webpack 5, и у меня возникли проблемы с пониманием того, почему мой код не работает. Идея очень похожа на то, что делают стандартные примеры объединения модулей:

app1 - это хост-приложение app2 - это удаленный доступ ко всему приложению app1

(app1 отображает заголовок и горизонтальную линию, ниже которой должен отображаться app2)

И app1, и app2 объявляют react и react-dom как свои общие, одноэлементные, нетерпеливые зависимости в weback.config.js:

// app1 webpack.config.js
module.exports = {
  entry: path.resolve(SRC_DIR, './index.js');,
  ...
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      remotes: {
        app2: `app2@//localhost:2002/remoteEntry.js`,
      },
      shared: { react: { singleton: true, eager: true }, "react-dom": { singleton: true, eager: true } },
    }),
    ...
  ],
};

// app2 webpack.config.js
module.exports = {
  entry: path.resolve(SRC_DIR, './index.js');,
  ...
  plugins: [
    new ModuleFederationPlugin({
      name: "app2",
      library: { type: "var", name: "app2" },
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/App",
      },
      shared: { react: { singleton: true, eager: true }, "react-dom": { singleton: true, eager: true } },
    }),
    ...
  ],
};

В App1 index.js у меня есть следующий код:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";


ReactDOM.render(<App />, document.getElementById("root"));

Компонент App1 App.js следующий:

import React, { Suspense } from 'react';

const RemoteApp2 = React.lazy(() => import("app2/App"));

export default function App() {
  return (
    <div>
      <h1>App 1</h1>
      <p>Below will be some content</p>
      <hr/>
      <Suspense fallback={'Loading App 2'}>
        <RemoteApp2 />
      </Suspense>
    </div>
  );
}

Но когда я запускаю приложение, я получаю следующую ошибку:

Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react?1bb3
    at Object.__webpack_modules__.<computed> (consumes:133)
    at __webpack_require__ (bootstrap:21)
    at fn (hot module replacement:61)
    at Module../src/index.js (main.bundle.a8d89941f5dd9a37d429.js:239)
    at __webpack_require__ (bootstrap:21)
    at startup:4
    at startup:6

Если я извлечу все от index.js до bootstrap.js и в index.js сделаю

import('./bootstrap');

Все работает нормально.

Меня это смущает как официальные документы и сообщения в блоге создателя заявляют, что вы может сделать bootstrap.js способ ИЛИ объявить зависимость как нетерпеливую.

Был бы признателен за любую помощь / понимание того, почему он не работает без шаблона bootstrap.js.

Вот ссылка на полную песочницу GitHub, которую я создавал: https://github.com/vovkvlad/webpack-module-fedaration-sandbox/tree/master/simple