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

[hiranaguiar]

Describe the bug

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:

mfe_2@0.1.0 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!

Reproduction

none

Used Package Manager

npm

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Memory: 12.30 GB / 39.91 GB
  Binaries:
    Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.6.6 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1

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.

[ScriptedAlchemy]

ChildFederationPlugin is not v8. clean your node modules and make sure there are no old copies or other version of the plugin in your repo or supply chain.

[ScriptedAlchemy]

@hiranaguiar any status update?