title: Webpack module federation is not working with eager shared libs
body: <p>I was looking into Webpack 5 Module federation feature, and have some trouble understanding why my code does not work.
  The idea is pretty similar to what standard module federation examples do:</p>
  <p><code>app1</code> - is the host app
  <code>app2</code> - is a remote exposing the whole app to <code>app1</code></p>
  <p>(<code>app1</code> renders the header and horizontal line, below which the <code>app2</code> should be rendered)</p>
  <p>Both <code>app1</code> and <code>app2</code> declares <code>react</code> and <code>react-dom</code> as their shared, singleton, eager dependencies in the <code>weback.config.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>// app1 webpack.config.js
  module.exports = {
    entry: path.resolve(SRC_DIR, './index.js');,
    ...
    plugins: [
      new ModuleFederationPlugin({
        name: &quot;app1&quot;,
        remotes: {
          app2: `app2@//localhost:2002/remoteEntry.js`,
        },
        shared: { react: { singleton: true, eager: true }, &quot;react-dom&quot;: { singleton: true, eager: true } },
      }),
      ...
    ],
  };
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// app2 webpack.config.js
  module.exports = {
    entry: path.resolve(SRC_DIR, './index.js');,
    ...
    plugins: [
      new ModuleFederationPlugin({
        name: &quot;app2&quot;,
        library: { type: &quot;var&quot;, name: &quot;app2&quot; },
        filename: &quot;remoteEntry.js&quot;,
        exposes: {
          &quot;./App&quot;: &quot;./src/App&quot;,
        },
        shared: { react: { singleton: true, eager: true }, &quot;react-dom&quot;: { singleton: true, eager: true } },
      }),
      ...
    ],
  };
  </code></pre>
  <p>In the App1 index.js I have next code:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import App from &quot;./App&quot;;
  
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById(&quot;root&quot;));
  </code></pre>
  <p>The App1 <code>App.js</code> component is next:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Suspense } from 'react';
  
  const RemoteApp2 = React.lazy(() =&gt; import(&quot;app2/App&quot;));
  
  export default function App() {
    return (
      &lt;div&gt;
        &lt;h1&gt;App 1&lt;/h1&gt;
        &lt;p&gt;Below will be some content&lt;/p&gt;
        &lt;hr/&gt;
        &lt;Suspense fallback={'Loading App 2'}&gt;
          &lt;RemoteApp2 /&gt;
        &lt;/Suspense&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>But when I start the application I get the next error:</p>
  <pre><code>Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react?1bb3
      at Object.__webpack_modules__.&lt;computed&gt; (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
  </code></pre>
  <p>If I extract everything from <code>index.js</code> to <code>bootstrap.js</code> and in <code>index.js</code> will do</p>
  <pre class="lang-js prettyprint-override"><code>import('./bootstrap');
  </code></pre>
  <p>Everything works just fine.</p>
  <p>This confuses me as <a href="https://webpack.js.org/concepts/module-federation/#troubleshooting" rel="noreferrer">official docs</a> and <a href="https://medium.com/dev-genius/module-federation-advanced-api-inwebpack-5-0-0-beta-17-71cd4d42e534" rel="noreferrer">blog posts</a> from the creator states that you can do either <code>bootstrap.js</code> way OR declare dependency as an eager one.</p>
  <p>Would appreciate any help/insights on why it does not work without <code>bootstrap.js</code> pattern.</p>
  <p>Here is a link to full GitHub sandbox I was building: <a href="https://github.com/vovkvlad/webpack-module-fedaration-sandbox/tree/master/simple" rel="noreferrer">https://github.com/vovkvlad/webpack-module-fedaration-sandbox/tree/master/simple</a></p>