title: ReactJS and Webpack Module Federation Application contains urls with undefined when deployed to cloudfront
body: <p>I have a micro-frontends app that consists of a container application with several remote applications. It is using ReactJS with Webpack 5 module federation and works fine on my local environment. However, when I deploy it to AWS CloudFront it doesn't work as expected.</p>
  <p>It seems that the container app loads on the correct path but 'undefined' is added to the url  of the remoteEntry.js file of the remotes.</p>
  <p>Please see screenshot below:</p>
  <p><a href="https://i.stack.imgur.com/xi70A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xi70A.png" alt="CloudFront Error" /></a></p>
  <p>The container projects webpack production config is as follows:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const prodConfig = {
    mode: "production",
    output: {
      filename: "[name].[contenthash].js",
      publicPath: "/container/latest/",
    },
    plugins: [
      new ModuleFederationPlugin({
        name: "container",
        remotes: {
          auth: `auth@${domain}/auth/latest/remoteEntry.js`,
          marketing: `marketing@${domain}/marketing/latest/remoteEntry.js`,
          dashboard: `dashboard@${domain}/dashboard/latest/remoteEntry.js`,
        },
        shared: packageJson.dependencies,
      }),
    ],
  };</code></pre>
  </div>
  </div>
  </p>
  <p>The remote projects webpack production config is as follows:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const prodConfig = {
    mode: "production",
    output: {
      filename: "[name].[contenthash].js",
      publicPath: "/marketing/latest/",
    },
    plugins: [
      new ModuleFederationPlugin({
        name: "marketing",
        filename: "remoteEntry.js",
        exposes: {
          "./MarketingApp": "./src/bootstrap",
        },
        shared: packageJson.dependencies,
      }),
    ],
  };</code></pre>
  </div>
  </div>
  </p>
  <p>The container projects App.js is as follows:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { lazy, Suspense, useState, useEffect } from "react";
  import { Router, Route, Switch, Redirect } from "react-router-dom";
  import {
    StylesProvider,
    createGenerateClassName,
  } from "@material-ui/core/styles";
  import { createBrowserHistory } from "history";
  
  import Progress from "./components/Progress";
  import Header from "./components/Header";
  
  const MarketingLazy = lazy(() =&gt; import("./components/MarketingApp"));
  const AuthLazy = lazy(() =&gt; import("./components/AuthApp"));
  const DashboardLazy = lazy(() =&gt; import("./components/DashboardApp"));
  
  const generateClassName = createGenerateClassName({
    productionPrefix: "co",
  });
  
  const history = createBrowserHistory();
  
  export default () =&gt; {
    const [isSignedIn, setIsSignedIn] = useState(false);
  
    useEffect(() =&gt; {
      if (isSignedIn) {
        history.push("/dashboard");
      }
    }, [isSignedIn]);
  
    return (
      &lt;Router history={history}&gt;
        &lt;StylesProvider generateClassName={generateClassName}&gt;
          &lt;div&gt;
            &lt;Header
              onSignOut={() =&gt; setIsSignedIn(false)}
              isSignedIn={isSignedIn}
            /&gt;
            &lt;Suspense fallback={&lt;Progress /&gt;}&gt;
              &lt;Switch&gt;
                &lt;Route path="/auth"&gt;
                  &lt;AuthLazy onSignIn={() =&gt; setIsSignedIn(true)} /&gt;
                &lt;/Route&gt;
                &lt;Route path="/dashboard"&gt;
                  {!isSignedIn &amp;&amp; &lt;Redirect to="/" /&gt;}
                  &lt;DashboardLazy /&gt;
                &lt;/Route&gt;
                &lt;Route path="/" component={MarketingLazy} /&gt;
              &lt;/Switch&gt;
            &lt;/Suspense&gt;
          &lt;/div&gt;
        &lt;/StylesProvider&gt;
      &lt;/Router&gt;
    );
  };</code></pre>
  </div>
  </div>
  </p>
  <p>I am struggling to figure out where the error is. I am not sure if its an error with:</p>
  <ul>
  <li>React</li>
  <li>React Router</li>
  <li>Webpack Module Federation</li>
  <li>AWS CloudFront</li>
  </ul>
  <p>Any help would be appreciated</p>