`next dev` produces "Failed to compile" error on Next.js13 with NextFederationPlugin

[aphiwadchh]

Hi, thanks so much for building such an amazing library.

I'm running into issue using NextFederationPlugin with Next.js13. I follow the implementation from here https://github.com/module-federation/nextjs-mf/tree/main/packages/nextjs-mf
and when try running pnpm dev my local site produce error :

Failed to compile
webpack/runtime/readFile chunk loading
Cannot convert undefined or null to object

I have push my setup here https://github.com/aphiwadchh/next13-mf-test

What I did:

const { NextFederationPlugin } = require('@module-federation/nextjs-mf');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack(config, options) {
      config.plugins.push(
        new NextFederationPlugin({
          name: 'nextremote',
          filename: 'static/chunks/remoteEntry.js',
          exposes: {
            './HelloWorld': './pages/hello-world',
          },
          shared: {},
        })
      );

    return config;
  },
}

module.exports = nextConfig

With above config, I can see .next/static/chunks/remoteEntry.js is generated, but the site crash with error.

What I tried:

const { NextFederationPlugin } = require('@module-federation/nextjs-mf');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack(config, options) {
    const { isServer } = options;

    // wrapping !isServer here since my need is for SSG only
    if (!isServer) {
      config.plugins.push(
        new NextFederationPlugin({
          name: 'nextremote',
          filename: 'static/chunks/remoteEntry.js',
          exposes: {
            './HelloWorld': './pages/hello-world',
          },
          shared: {},
        })
      );
    }

    return config;
  },
}

module.exports = nextConfig

With above setup, I be able to run pnpm dev and works, however the file .next/static/chunks/remoteEntry.js is not being generated. So I have to run pnpm build. This sort of works, however it slow down development time cuz I can't have hot-reload update.

Have anyone run into similar issue? How do you fix/work-around this?

[ranshamay]

the plugin is designed to work on next@12 and next@11
there is a work @ScriptedAlchemy is doing to adjust it to next@13

#357 is the pr which will probably support it

@ScriptedAlchemy do you have any suggestions rather than wait?

[dreamfalcon]

I'm using next 13 with no problems.
"next": "13.0.0",
"@module-federation/nextjs-mf": "5.11.4",

[aphiwadchh]

I'm using next 13 with no problems. "next": "13.0.0", "@module-federation/nextjs-mf": "5.11.4",

interesting... can you help clone https://github.com/aphiwadchh/next13-mf-test and try npm dev this on your local? I'm wondering if it's just my setup then :/

[aphiwadchh]

Ok, just figured out the problem.
The remotes property is not optional! I didn't know that 😅
So even though the app is meant to be a remote, you have to set to empty remotes: {}

const { NextFederationPlugin } = require('@module-federation/nextjs-mf');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack(config, options) {
      config.plugins.push(
        new NextFederationPlugin({
          name: 'nextremote',
          filename: 'static/chunks/remoteEntry.js',
          remotes: {},  // this fixed it
          exposes: {
            './HelloWorld': './pages/hello-world',
          },
          shared: {},
        })
      );

    return config;
  },
}

module.exports = nextConfig

now pnpm dev works!

[ScriptedAlchemy]

I'll patch over next 13 support, but the app directory will take more time to solve

[victors1681]

I have not to issue with nextjs 13, however, they are moving away from webpack, and I had to install webpack manually, and works fine