I have two micro-frontend apps, main and checkout. For my MFE setup I’m using Next.js along with @module-federation/nextjs-mf. The main app consumes components from the checkout app. The issue is that when I change any exposed component, HMR does not work.

When I refresh the page I get hydration errors because the server still has the previous version, and I have to rerun the app to get the latest changes from the server.

What could be the issue here?

Here are the configs for both apps in next.config.js:

// for the main app
webpack: (config, { isServer }) => {
    const location = isServer
      ? '_next/static/ssr/remoteEntry.js'
      : '_next/static/chunks/remoteEntry.js';

    config.plugins.push(
      new NextFederationPlugin({
        name: 'main',
        filename: 'static/chunks/remoteEntry.js',
        exposes: {},
        remotes: {
            checkout: `checkout@http://localhost:3001/${location}`
        },
        shared: {},
        extraOptions: {
          enableImageLoaderFix: true,
          enableUrlLoaderFix: true,
        },
      })
    );
    return config;
  },

// for the checkout app
webpack: (config) => {
    config.plugins.push(
      new NextFederationPlugin({
        name: 'checkout',
        filename: 'static/chunks/remoteEntry.js',
        exposes: {
          './checkout': './pages/checkout.tsx',
        },
        shared: {},
        extraOptions: {
          enableImageLoaderFix: true,
          enableUrlLoaderFix: true,
          exposePages: true,
        },
      })
    );
    return config;
  },

Note: I’m using nx for my monorepo setup.