title: NextJS Microfrontend (MFE) - resolving expose incorrectly
body: <p>I have been following blog on NextJS MFE. However I have hit a dead end and would like some help.</p>
  <p><a href="https://thekevinwang.com/2021/03/26/micro-frontends-nextjs/" rel="nofollow noreferrer">https://thekevinwang.com/2021/03/26/micro-frontends-nextjs/</a></p>
  <p>I have 2 apps - one <code>shell</code> and other <code>ranked-app</code></p>
  <p>The shell app's <code>next.config.js</code> is</p>
  <pre><code>/**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
    webpack: (config, options) =&gt; {
      const { ModuleFederationPlugin } = options.webpack.container;
  
      config.plugins.push(
        new ModuleFederationPlugin({
          name: 'webapp',
          remotes: {
            'rankedApp': 'rankedApp@http://localhost:3502/_next/static/chunks/remoteEntry.js'
          }
        })
      );
  
      config.cache = false;
  
      return config;
    }
  };
  
  module.exports = nextConfig;
  </code></pre>
  <p>and the <code>ranked-app</code> next config is</p>
  <pre><code>/**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
    webpack: (config, options) =&gt; {
      const { ModuleFederationPlugin } = options.webpack.container;
  
      config.plugins.push(
        new ModuleFederationPlugin({
          name: 'rankedApp',
          library: {
            type: 'var',
            name: 'rankedApp'
          },
          filename: 'static/chunks/remoteEntry.js',
          exposes: {
            './Example': './src/components/Example'
          },
          remotes: {},
          shared: []
        })
      );
  
      config.cache = false;
  
      config.output.publicPath = 'http://localhost:3502/_next/';
  
      return config;
    }
  };
  
  module.exports = nextConfig;
  </code></pre>
  <p>However, when I attempt to import the <code>Example</code> component from <code>ranked-app</code>, the <code>remoteEntry</code> gets loaded from <code>http://localhost:3502</code>, but the request for chunk <code>src_component_Example_tsx.js</code> is relative to <code>http://localhost:3501</code> interesting it ignores <code>publicPath</code> in <code>ranked-app</code>. Any pointers where I am going wrong could be nice to see.</p>
  <p><a href="https://i.stack.imgur.com/d3CoS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d3CoS.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/YTLKj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YTLKj.png" alt="enter image description here" /></a></p>
  <pre><code>import React, { FC, Fragment } from &quot;react&quot;;
  import dynamic from 'next/dynamic';
  
  const RankedAppExample = dynamic(
    async () =&gt; {
      return await import(&quot;rankedApp/Example&quot;);
    },
    {
      ssr: false,
      loading: ({ error }) =&gt; {
        if (error) {
          return &lt;Fragment&gt;Error&lt;/Fragment&gt;;
        }
        return &lt;Fragment&gt;Loading&lt;/Fragment&gt;;
      }
    }
  );
  
  interface HomeProps {}
  
  const Home: FC&lt;HomeProps&gt; = (props: HomeProps) =&gt; {
    return &lt;Fragment&gt;Home &lt;RankedAppExample /&gt;&lt;/Fragment&gt;;
  };
  
  export default Home;
  </code></pre>