Shared module next/router doesn't exist in shared scope default , next js ,@module-federation/nextjs-mf

Question

In my next js turbor repo i have a host app with this next.config.js :

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

const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ["ui", "core"],
  webpack: (config, options) => {
    const { isServer } = options;
    config.experiments = { topLevelAwait: true };
    config.plugins.push(
      new NextFederationPlugin({
        name: "application",
        remotes: {
          firstapplication:`firstapplication@http://localhost:4001/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
          secondapplication:`secondapplication@http://localhost:4002/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
        },
        shared:{
          i18next:{
              singleton:true
           },
        
          },
        filename: "static/chunks/remoteEntry.js",
        extraOptions: {
          exposePages: false,
        },
      })
    );
    return config;
  },
};

module.exports = nextConfig;

And when i use

import {useRouter} from 'next/router';

in my index.js file in pages i got this error :

Error: Shared module next/router doesn't exist in shared scope default

Note : I wanna use a next/router only in the host app and this error happens when I start the host app not the remotes it has nothing to do with the remotes and if I remove the import, the error disappear

Answer 1

use import {useRouter} from 'next/naviagtion'; this will solve the problem