title: Webpack not rendering any markup logic on build
body: <p>I have a microfrontend app with a custom webpack(v5) configuration with react, typescript and the module federation plugin.
  Everything works well in develop mode. Also, the built projects works fine when imported and rendered into the microfrontend container app (container app wires together all microfrontend apps).</p>
  <p>But, when a build is executed and i try to run the production build locally, using <code>serve -s dist -p 9997</code>, i only get a blank page with no markup rendered. (Apologies in advance for the long post):</p>
  <p><strong>webpack build config file</strong></p>
  <pre><code>module.exports = {
      resolve: {
          extensions: [&quot;.ts&quot;, &quot;.tsx&quot;, &quot;.js&quot;, &quot;jsx&quot;], // file extensions we allow webpack to evaluate
      },
      mode: &quot;production&quot;,
      output: {
          filename: &quot;[name].[contenthash].js&quot;,
          clean: true,
      },
      module: {
          rules: [
              {
                  test: /\.tsx?$/,
                  exclude: /node_modules/,
                  use: {
                      loader: &quot;babel-loader&quot;,
                      options: {
                          presets: [
                              // &quot;@babel/preset-env&quot;,
                              &quot;@babel/preset-react&quot;,
                              &quot;@babel/preset-typescript&quot;,
                          ],
                          plugins: [&quot;@babel/plugin-transform-runtime&quot;],
                      },
                  },
              },
          ],
      },
      plugins: [
          new ModuleFederationPlugin({
              name: &quot;microfrontend_app&quot;, // name of the app used by the container to get the app code
              filename: &quot;remoteEntry.js&quot;, // name of the file this app sends to the container - DO NOT CHANGE.
              exposes: {
                  &quot;./MicrofrontendApp&quot;: &quot;./src/bootstrap&quot;, // alias, lets the container app import this app as a module with name PortalNavigationApp
              },
              shared: packageJson.dependencies,
          }),
          new HtmlWebpackPlugin({
              template: &quot;./public/index.html&quot;,
          }),
      ],
  };
  </code></pre>
  <p><strong>webpack dev config file</strong></p>
  <pre><code>module.exports = {
      mode: &quot;development&quot;,
      resolve: {
          extensions: [&quot;.ts&quot;, &quot;.tsx&quot;, &quot;.js&quot;, &quot;jsx&quot;], // file extensions we allow webpack to evaluate
      },
      devServer: {
          port: 9998,
          historyApiFallback: {
              index: &quot;/index.html&quot;,
          },
      },
      module: {
          rules: [
              {
                  test: /\.tsx?$/,
                  exclude: /node_modules/,
                  use: {
                      loader: &quot;babel-loader&quot;,
                      options: {
                          presets: [
                              // &quot;@babel/preset-env&quot;,
                              &quot;@babel/preset-react&quot;,
                              &quot;@babel/preset-typescript&quot;,
                          ],
                          plugins: [&quot;@babel/plugin-transform-runtime&quot;],
                      },
                  },
              },
          ],
      },
      plugins: [
          new ModuleFederationPlugin({
              name: &quot;microfrontend_app&quot;, // name of the app used by the container to get the app code
              filename: &quot;remoteEntry.js&quot;, // name of the file this app sends to the container - DO NOT CHANGE.
              exposes: {
                  &quot;./MicrofrontendApp&quot;: &quot;./src/bootstrap&quot;, // alias, lets the container app import this app as a module with name PortalNavigationApp
              },
              shared: packageJson.dependencies,
          }),
          new HtmlWebpackPlugin({
              template: &quot;./public/index.html&quot;,
          }),
      ],
  };
  </code></pre>
  <p><strong>index.html</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;Title1&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=&quot;_microfrontend-app&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>App.tsx</strong></p>
  <pre><code>export default ({ history }: IApp): JSX.Element =&gt; {
      console.log('loading App.tsx');
      return (
          &lt;MainWrapper&gt;
              &lt;Router history={history as unknown as H.History}&gt;
                  &lt;h1&gt;hello from wellcom template app&lt;/h1&gt;
              &lt;/Router&gt;
          &lt;/MainWrapper&gt;
      );
  };
  
  const MainWrapper = styled.main``;
  </code></pre>
  <p><strong>bootstrap.tsx</strong></p>
  <pre><code>const mount = (
      el: Element,
      {
          onNavigate,
          defaultHistory,
          initialPath,
      }: {
          onNavigate: (() =&gt; void) | null;
          defaultHistory: any;
          initialPath: string | null;
      }
  ): unknown =&gt; {
      // if in development and isolation, use browser history. If not, use memory history
      const history =
          defaultHistory ||
          createMemoryHistory({
              initialEntries: [initialPath || &quot;&quot;],
          });
      if (onNavigate) {
          history.listen(onNavigate);
      }
  
      ReactDOM.render(&lt;App history={history} /&gt;, el);
  
      return {
          onParentNavigate({ pathname: nextPathName }: { pathname: string }) {
              const { pathname } = history.location;
  
              //prevent infinite routing loop
              if (pathname !== nextPathName) {
                  history.push(nextPathName);
              }
          },
      };
  };
  
  // If we are in development and in isolation call mount immediately
  if (process.env.NODE_ENV === &quot;development&quot;) {
      const devRoot = document.querySelector(&quot;#_microfrontend-app&quot;);
  
      if (devRoot) {
          mount(devRoot, {
              defaultHistory: createBrowserHistory(),
              initialPath: null,
              onNavigate: null,
          });
      }
  }
  
  export { mount };
  </code></pre>
  <p><strong>index.ts</strong></p>
  <pre><code>import(&quot;./bootstrap&quot;);
  </code></pre>
  <p>This is the output i get when running webpack.dev.js:
  <a href="https://i.stack.imgur.com/gQx4l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gQx4l.png" alt="Running in dev with webpack.dev" /></a></p>
  <p>And this is the output i get after running webpack build and serving using <code>serve -s dist -p 9997</code>:
  <a href="https://i.stack.imgur.com/Om73u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Om73u.png" alt="Running in prod with webpack.prod" /></a></p>
  <p>I just cannot figure out why this happens. This is the output of my dist folder:</p>
  <p><a href="https://i.stack.imgur.com/Y81Qo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y81Qo.png" alt="enter image description here" /></a></p>
  <p>The index.html correctly appends the main.975.... js file. If i do a CTRL+F looking for &quot;hello from App.tsx&quot; in all the js files, i find it in the 499.63...js. So the markup logic exists in build.</p>
  <p><a href="https://i.stack.imgur.com/wR6jo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wR6jo.png" alt="enter image description here" /></a></p>
  <p>Also, the main.975 js file seems to be aggregating all other js files:</p>
  <p><a href="https://i.stack.imgur.com/F9NW4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F9NW4.png" alt="enter image description here" /></a></p>
  <p>I just cannot understand why the markup is not being rendered in the build version? I suspect there is something im missing in the webpack prod file. I tried to search through a create-react-app webpack file to compare, but there is so much stuff there i got completely lost.</p>