Next.js 15 Pages Router: useRouter Breaks When Declaring the Plugin

[dani0f]

Describe the bug

I am using Next.js 15 with the pages directory. When I declare the NextFederationPlugin in next.config.mjs, the useRouter hook from next/router throws the following error:

Error: NextRouter was not mounted.
Link: https://nextjs.org/docs/messages/next-router-not-mounted

However, when I remove the plugin, useRouter works as expected. Since my project is using the pages router, next/router should be functioning correctly.

Steps to Reproduce

1. Set up a Next.js 15 project with the pages directory.
2. Install @module-federation/nextjs-mf.
3. Configure next.config.mjs to use NextFederationPlugin.
4. Try to use useRouter inside a component.
5. Observe the error message about NextRouter not being mounted.
6. Remove the plugin and notice that useRouter works again.

Expected Behavior

• useRouter should work even when the NextFederationPlugin is added to next.config.mjs.

Actual Behavior

• useRouter throws an error when NextFederationPlugin is declared.

Environment

Package.json (dependencies)

{
  "dependencies": {
    "@module-federation/nextjs-mf": "^8.8.21",
    "next": "15.2.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "webpack": "^5.98.0"
  }
}

Next.js Config (next.config.mjs)

import { NextFederationPlugin } from '@module-federation/nextjs-mf';

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack(config, options) {
    config.plugins.push(
      new NextFederationPlugin({
        name: 'mfe1',
        filename: 'static/chunks/remoteEntry.js',
        remotes: {
          mfe2: `http://localhost:3001/static/${options.isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
        },
        shared: {},
        extraOptions: {
          exposePages: true,
          enableImageLoaderFix: true,
          enableUrlLoaderFix: true,
        },
      })
    );
    return config;
  },
};
export default nextConfig;

Additional Notes

• This issue occurs only when NextFederationPlugin is present.
• Removing the plugin restores the expected behavior of useRouter.
• This might be a conflict between Module Federation and Next.js's internal routing system.

Would appreciate any insights on whether this is a bug or if there's a missing configuration. Thanks! 🚀

Reproduction

https://codesandbox.io/p/github/dani0f/nextjbug/main?import=true

Used Package Manager

npm

System Info

System:
    OS: Linux 6.1 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (2) x64 AMD EPYC
    Memory: 3.16 GB / 4.14 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.12.1 - /home/codespace/nvm/current/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 10.5.0 - /home/codespace/nvm/current/bin/npm
    pnpm: 8.15.6 - /home/codespace/nvm/current/bin/pnpm

Validations

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