TypeError: withModuleFederation is not a function - nextjs moduleFederation

Question

I'm using micro-frontend in nextjs. Wen i start the server, in the next.config.js am getting TypeError: withModuleFederation is not a function

I tried the latest version of @module-federation/nextjs-mf but in this I'm getting version mismatch error.

any suggestion or solution ??

next.config.js content

const {
  withModuleFederation,
  MergeRuntime,
} = require("@module-federation/nextjs-mf");
const path = require("path");

module.exports = {
  webpack: (config, options) => {
    const { buildId, dev, isServer, defaultLoaders, webpack } = options;
    const mfConf = {
      name: "test1",
      library: { type: config.output.libraryTarget, name: "test1" },
      filename: "static/runtime/remoteEntry.js",
      remotes: {},
      exposes: {
        "./nav": "./components/nav",
      },
      shared: [],
    };

    withModuleFederation(config, options, mfConf);
    config.plugins.push(new MergeRuntime());
    if (!isServer) {
      config.output.publicPath = "http://localhost:3000/_next/";
    }
    return config;
  },
};

package.json content

{
  "name": "charts",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "resolutions": {
    "webpack": "5.1.3"
  },
  "dependencies": {
    "@module-federation/nextjs-mf": "^2.3.1",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0"
  },
  "devDependencies": {
    "@types/node": "^17.0.40",
    "@types/react": "^18.0.12",
    "eslint": "8.17.0",
    "eslint-config-next": "12.1.6",
    "typescript": "^4.7.3"
  }
}

Answer 1

@module-federation/nextjs-mf is no longer free, if its required need to purchase from

module-federation/nextjs-mf