How to Build a Micro-frontend Application with Next.js and Webpack?

Frontend and Backend Development
1

I’m using version 14 of Next.js. Below is my current next.config.mjs setup:

export default (stage, { baseConfig }) => {
  const newConfig = {
    ...baseConfig,
    webpack(config, { isServer }) {
      config.plugins.push(
        new ModuleFederationPlugin({
          name: 'remoteApp',
          filename: 'static/remoteEntry.js',
          exposes: {
            './Button': './pages/components/Button',
            // Add additional components here
          },
          shared: {
            react: { singleton: true, eager: true },
            'react-dom': { singleton: true, eager: true },
          }
        })
      );
      return config;
    }
  };
  return newConfig;
};

However, I’m encountering the following error when I run the app:

shell-app3@0.1.0 dev
next dev

▲ Next.js 14.2.16
Local:        http://localhost:3000

The application starts successfully but then throws this error:

TypeError: The 'compilation' argument must be an instance of Compilation

Any insights on how to resolve this issue?

2

From my experience, this error might arise due to compatibility issues or mismatched versions between Webpack and Next.js. It’s crucial to ensure that the module federation setup aligns with Next.js 14 and its underlying Webpack version. Consider checking your Webpack and Module Federation Plugin versions to see if they support Next.js 14. If needed, updating Webpack and related modules might solve the issue. Another angle to explore is whether any other plugins or modifications in your next.config.mjs are conflicting with Module Federation. Simplifying your config as a test can often pinpoint the problem.