title: Module Federation Not working with dynamic hooking the remote in webpack.config.js
body: <p>I have module federation setup and working fine when I load the remotes upfront in index.html</p>
  <p>Below works</p>
  <pre><code>index.html
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;script src=&quot;http://localhost:8002/remoteEntry.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  host webpack
  {
              name: &quot;home&quot;,
              library: {type: &quot;var&quot;, name: &quot;home&quot;},
              filename: &quot;remoteEntry.js&quot;,
              remotes: {
                  nav: &quot;dashboards&quot;,
              },
              shared: [&quot;react&quot;, &quot;react-dom&quot;],
          }
  
  remote webpack
  {
              name: &quot;dashboards&quot;,
              library: {type: &quot;var&quot;, name: &quot;dashboards&quot;},
              filename: &quot;remoteEntry.js&quot;,
              remotes: {},
              exposes: {
                  Header: &quot;./src/Header&quot;,
              },
              shared: [&quot;react&quot;, &quot;react-dom&quot;],
          }
  </code></pre>
  <p>However this loads the JS File upfront which is undesireable. I was following examples where the library is dynamically loaded in webpack... Here is what I want to do</p>
  <pre><code>index.html
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;body&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  
  
  host webpack
  {
  
              name: &quot;app-shell&quot;,
              filename: &quot;remoteEntry.js&quot;,
              remotes: {
                  dashboards: &quot;dashboards@http://localhost:8002/remoteEntry.js&quot;,
              },
          }
  
  remote webpack
  {
              name: &quot;dashboards&quot;,
              filename: &quot;remoteEntry.js&quot;,
              remotes: {},
              exposes: {
                  Header: &quot;./src/Header.jsx&quot;,
              },
          }
  </code></pre>
  <p>I get error on the host app</p>
  <pre><code>Uncaught syntax error; Invalid or unexpected token:
  module.exports = dashboards@http://localhost:8002/dist/remoteEntry.js;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/3kOLq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3kOLq.png" alt="JS Error" /></a></p>