@module-federation/nextjs-mf and NextJs Error: TypeError: Cannot read properties of null (reading 'fn')

[hiranaguiar]

Hello everyone,

I've encountered a persistent error over the past few months that intermittently appears across my set of MFEs (Micro Frontends). Unfortunately, I'm struggling to provide specific details about this error. However, I've created a simplified demo to illustrate the issue:

next.config.js

/** @type {import('next').NextConfig} */
const { NextFederationPlugin } = require("@module-federation/nextjs-mf");

module.exports = {
  webpack: (config, { isServer }) => {
    config.plugins.push(
      new NextFederationPlugin({
        name: "mfe_2",
        filename: "static/chunks/remoteEntry.js",
        remotes: {
          mfe_1: "mfe_1@http://localhost:3000/remoteEntry.js",
        },
        exposes: {},
        extraOptions: {
          debug: true,
        }
      })
    );

    return config;
  },
};

packge.json:

{
  "name": "mfe_2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@module-federation/nextjs-mf": "^8.2.4",
    "next": "^13.2.3",
    "react": "^18",
    "react-dom": "^18",
    "webpack": "5.90.3"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "typescript": "^5"
  }
}

.env:
NEXT_PRIVATE_LOCAL_WEBPACK=true

_app.tsx:

import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

--

On "npm run dev" command, I get an error and therefore it won't even start the application. Only solved by removing the NextFederationPlugin from the next.config.js.

Complete log of the error bellow:

[email protected] dev
next dev -p 3001

TypeError: Cannot read properties of null (reading 'fn')
at C:\Users\hiran\Documents\Projects\POCs\mfe_2\node_modules\next\dist\compiled\webpack\bundle5.js:13:29685
at Array.map ()
at AsyncSeriesHookCodeFactory.setup (C:\Users\hiran\Documents\Projects\POCs\mfe_2\node_modules\next\dist\compiled\webpack\bundle5.js:13:29675)
at Hook.COMPILE [as compile] (C:\Users\hiran\Documents\Projects\POCs\mfe_2\node_modules\next\dist\compiled\webpack\bundle5.js:13:24094)
at Hook._createCall (C:\Users\hiran\Documents\Projects\POCs\mfe_2\node_modules\next\dist\compiled\webpack\bundle5.js:13:26635)
at Hook.CALL_ASYNC_DELEGATE (C:\Users\hiran\Documents\Projects\POCs\mfe_2\node_modules\next\dist\compiled\webpack\bundle5.js:13:25988)
at run (C:\Users\hiran\Documents\Projects\POCs\mfe_2\node_modules\next\dist\compiled\webpack\bundle5.js:28:140498)
at Compiler.run (C:\Users\hiran\Documents\Projects\POCs\mfe_2\node_modules\next\dist\compiled\webpack\bundle5.js:28:140794)
at compilerWithCallback (C:\Users\hiran\Documents\Projects\POCs\mfe_2\node_modules@module-federation\nextjs-mf\src\plugins\ChildFederationPlugin.js:228:39)
at C:\Users\hiran\Documents\Projects\POCs\mfe_2\node_modules@module-federation\nextjs-mf\src\plugins\ChildFederationPlugin.js:250:17

--

Tnx in advance for any help!

[zhoushaw]

I think this problem can be better solved through the issue, so that we can further promote and follow up, thank you ~

[uttam-in]

I got similar issue. Any fix for this?