@module-federation/nextjs-mf breaks from version 8.8.24 and onwards

[adit-shah-devrev]

Describe the bug

@module-federation/nextjs-mf breaks from version 8.8.24 and onwards. It works for v8.8.23 and below.

Here is the error

react.development.js:1487 Uncaught TypeError: Cannot read properties of null (reading 'useLayoutEffect')
at exports.useLayoutEffect (react.development.js:1487:33)
at Root (index.js:420:20)
at react-stack-bottom-frame (react-dom-client.development.js:22429:20)
at renderWithHooks (react-dom-client.development.js:5758:22)
at updateFunctionComponent (react-dom-client.development.js:8019:19)
at beginWork (react-dom-client.development.js:9684:18)
at runWithFiberInDEV (react-dom-client.development.js:544:16)
at performUnitOfWork (react-dom-client.development.js:15045:22)
at workLoopSync (react-dom-client.development.js:14871:41)
at renderRootSync (react-dom-client.development.js:14851:11)
at performWorkOnRoot (react-dom-client.development.js:14385:44)
at performWorkOnRootViaSchedulerTask (react-dom-client.development.js:15932:7)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:44:48)

Here is the next.config.js file

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { composePlugins, withNx } = require('@nx/next');
const { NextFederationPlugin } = require('@module-federation/nextjs-mf');

const remotes = (isServer) => {
  const location = isServer ? 'ssr' : 'chunks';
  return {
    remote: `remote@${process.env.NEXT_PUBLIC_REMOTE_URL}/_next/static/${location}/remoteEntry.js`,
  };
};

/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
  webpack: (config, options) => {
    config.plugins.push(
      new NextFederationPlugin({
        exposes: {},
        extraOptions: {},
        filename: 'static/chunks/remoteEntry.js',
        name: 'host',
        remotes: remotes(options.isServer),
      })
    );

    return config;
  },
};

const plugins = [
  // Add more Next.js plugins to this list if needed.
  withNx,
];

module.exports = composePlugins(...plugins)(nextConfig);

Reproduction

https://github.com/adit-shah-devrev/module-federation-preload

Used Package Manager

npm

System Info

System:
    OS: macOS 15.3.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 699.48 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
  Browsers:
    Brave Browser: 131.1.73.97
    Edge: 136.0.3240.50
    Safari: 18.3

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[adit-shah-devrev]

@ScriptedAlchemy any recommendations from your side?

[ScriptedAlchemy]

diff what changed between the two versions - it looks like you may be using next 15 or app router?

[adit-shah-devrev]

Yeah I'm using next 15 but with page router. I'll diff what changed between two versions

[adit-shah-devrev]

Is it related to layers support in 8.8.24 version with Next 15?

[ScriptedAlchemy]

it must be, but that release shouldnt have had anything too detramental to v15 - id diff the dist directory of the two locally - then try staging back whatever the changes were one by one, when you find it let me know.

In next - i do know theres some difference in how stuff is shared like react - but usually that doesnt impact pages router

[adit-shah-devrev]

Reverting mf-enhanced to 0.11.4 for nextjs-mf loads the app

EDIT: it breaks with the error Error: NextRouter was not mounted

[ScriptedAlchemy]

due to layers, here is a version of v9 that may work better 0.0.0-next-20250616235047

[github-actions]

Stale issue message