Uncaught TypeError: Cannot read properties of null (reading 'useContext") in Module Federation v^14 and v^13

[selvaganapathi5995]

Link to the code that reproduces this issue

https://github.com/rakeshongithub/next13-mf-example/branches

To Reproduce

This repository presents a practical example of how a micro application can be integrated within another Next.js 13 application. It showcases two variations of Next.js applications: one utilizing page-based routing and the other employing app-based routing.

The primary objective of this demonstration is to highlight the potential issues encountered with app-based routing and module federation. Install dependencies

npm run install App 1. Remote App - Custom React App

This is a micro application designed to be utilized by the host application.

To execute this application, use the following command: npm run dev --workspace @next13-mf-example/custom-react-app App 2. Host App - Next 13 with App Dir

This is the host application that uses Next.js 13 and app-based routing.

To execute this application, use the following command: npm run dev --workspace @next13-mf-example/next13-with-app-dir App 3. Host App - Next 13 with Page Dir

This is the host application that uses Next.js 13 and page-based routing.

To execute this application, use the following command: npm run dev --workspace @next13-mf-example/next13-with-pages-dir

Current vs. Expected behavior

Branch: next14.0.3-webpack-mf-plugin

Actual:

In custom-react-app/app.js-> useContext commented then app is working in both app and page router

In custom-react-app/app.js-> useContext uncommented then app is not working in both app and page router throwing following error

Expected:

While importing exposed reaact component that have useContext should work fine

Branch: next13.5.6-module-federation/nextjs-mf-plugin

Actual:

1. In custom-react-app/app.js-> useContext commented then app is working in page router

Using const NextFederationPlugin = require('@module-federation/nextjs-mf') in config for module federation

2. In custom-react-app/app.js-> useContext commented then app is not working in app router

Using const NextFederationPlugin = require('@module-federation/nextjs-mf') in config for module federation

3. In custom-react-app/app.js-> useContext uncommented then app is not working in both page and app router

Using const NextFederationPlugin = require('@module-federation/nextjs-mf') in config for module federation

Expected:

While importing exposed reaact component that have useContext should work fine

Branch:next13.5.6-webpack-mf-plugin

Actual:

In custom-react-app/app.js-> useContext commented then app is working in both app and page router

In custom-react-app/app.js-> useContext uncommented then app is not working in both app and page router throwing following error

Expected:

While importing exposed reaact component that have useContext should work fine

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  pnpm: N/A
Relevant Packages:
  next: 13.5.6, 14.0.6
  eslint-config-next: 13.5.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure, App Router

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

There are three branches I created below mentioned are the links and each branch have different next.config.js setup.

1. Branch name: next13.5.6-webpack-mf-plugin Next version: 13.5.6 Federation Module: Webpack Module Federation plugin Link: https://github.com/rakeshongithub/next13-mf-example/tree/next13.5.6-webpack-mf-plugin

2. Branch name: next13.5.6-module-federation/nextjs-mf-plugin Next version: 13.5.6 Federation Module: module-federation/nextjs-mf-plugin Link: https://github.com/rakeshongithub/next13-mf-example/tree/next13.5.6-module-federation/nextjs-mf-plugin

3. Branch name: next14.0.3-webpack-mf-plugin Next version: 14.0.3 Federation Module: Webpack Module Federation plugin Link: https://github.com/rakeshongithub/next13-mf-example/tree/next14.0.3-webpack-mf-plugin

[sublayerio]

I can verify this. It happens all of a sudden.

[sublayerio]

I isolated the usePathname function to see if it would make a difference, used that instead importing from 'next/navigation'.

I'm still getting the same error. It seems to me that the error occurs within usePathname called from within Next itself somewhere.

[kelvinlouis]

We were able to avoid this issue by setting swcMinify: false in next.config.js. This is not going to be possible in v15, because turning it off is deprecated.

[Gawdfrey]

I am getting this error in a standard next project, version 14.1.0. next.config.js is empty. Are the rest of you using module federation. @kelvinlouis will attempt with swcMinify: false, thanks!

[Brettkgamble]

This broke for me in 14.1.1-canary.38.

Just adding swcMinify: true solved the issue for me. I did not try false.

[selvaganapathi5995]

I tried with swcMinify:true but it is not working in my case.

[samcx]

@selvaganapathi5995 Hi there!

Next.js does not support Module Federation out of the box, so this is technically not an issue with core Next.js (this is requiring a custom Webpack solution) and package. Because of this, I will be moving this issue over to our discussions.