Error with unmounted `NextRouter` when consuming Nextjs remote application #6498

[jianingroja]

中文

问题描述

现有应用框架如下

• Next.js 主应用
• Next.js 子应用

主应用和子应用之间使用 Module Federation 提供的插件进行连接。
由于 Module Federation 宣布不再为 Next.js 16 及之后的版本提供插件支持，我正在尝试将主应用向 Modern.js 迁移。

期待达成的应用框架如下

• Modern.js 主应用
  • Next.js 主应用

目前遇到的问题是，Next.js 子应用接入后，一旦涉及到子应用内部使用 useRouter，便会产生报错，NextRouter was not mounted。

问题复现

Demo:

• Modern.js 主应用
  • Next.js 子应用

可看出，当从主应用访问路由/simple-page时，子应用正常加载；访问/complex-page 时，由于子应用中使用了 useRouter，会产生报错 NextRouter was not mounted。

错误源码

const router = _react.default.useContext(_routercontextsharedruntime.RouterContext);
if (!router) {
		throw new Error("NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted");
}

期待行为

可以从主应用正常访问加载子应用的页面。

---

English

Description

Micro Frontend Applications structure

• Next.js host
• Next.js remote
• Module Federation next-mfe plugin

As Module Federation announces it will stop supporting Next.js since version 16, I am trying to migration the host application to Modern.js, and keep the remote application being Next.js.

Micro Frontend Applications structure after migration

• Next.js host
• Next.js remote
• Module Federation next-mfe plugin

Problem

When Next.js remote application is being consumed from the Modern.js host Application, if the loaded remote component contains the usage of NextRouter, an error of NextRouter was not mounted will be thrown.

Reproduction

Demo:

• Modern.js host application
• Next.js remote application

It can be seen that when accessing /simple-page from the host application, remote application is loaded as expected. When accessing complex-page, because of the usage of useRouter in remote application, an error NextRouter was not mounted is thrown.

Error source

const router = _react.default.useContext(_routercontextsharedruntime.RouterContext);
if (!router) {
		throw new Error("NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted");
}

Expectation

To load remote application with router usage from the host application.

[KyrieLii]

@jianingroja Modern.js 主应用 需要更新下代码，现在只初始化了项目

[jianingroja]

@KyrieLii
多谢指出。已更新

[MaykonMorais]

Hi guys! I trying to do something similar but working with ssr: true, is it possible? It's throwing this error for me:
error: "Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

[KyrieLii]

@jianingroja 因为 nextjs remote + modernjs host 丢失了 nextjs 框架运行时上下文，这个能力是由 @module-federation/nextjs-mf 提供或者说共享的，我研究了一下，目前 modernjs 还不能直接使用这个插件来提供 nextjs 的运行时能力。

@ScriptedAlchemy Hi zack , any ideas for this case (modernjs host + nextjs remote) ?I think this demand will increase, do we have any solutions or plans? 🤔

[ScriptedAlchemy]

What's the issue you are encountering?

I see next router mentioned here, note it's important not to use any of the router imports from next and next.js router is coupled tightly to next itself.

[KyrieLii]

@ScriptedAlchemy ye, the problem is indeed that an error occurs when using the nextjs router api (useRouter)..

[KyrieLii]

@MaykonMorais Can you provide a minimal reproducible demo? It may not be the same problem.

[zllkjc]

@MaykonMorais you can give a new issue for us

[2heal1]

@ScriptedAlchemy I'm not sure ,will the problem be solved by setting nextjs-router as shared ?

[ScriptedAlchemy]

问题描述

现有应用框架如下

• Next.js 主应用
  • Next.js 子应用

主应用和子应用之间使用 Module Federation 提供的插件进行连接。
由于 Module Federation 宣布不再为 Next.js 16 及之后的版本提供插件支持，我正在尝试将主应用向 Modern.js 迁移。

期待达成的应用框架如下

• Modern.js 主应用
  • Next.js 主应用

目前遇到的问题是，Next.js 子应用接入后，一旦涉及到子应用内部使用 useRouter，便会产生报错，NextRouter was not mounted。

问题复现

Demo:

• Modern.js 主应用
  • Next.js 子应用

可看出，当从主应用访问路由/simple-page时，子应用正常加载；访问/complex-page 时，由于子应用中使用了 useRouter，会产生报错 NextRouter was not mounted。

期待行为

可以从主应用正常访问加载子应用的页面。

Don't use next/link or next/router - use modernjs equivalents in next. Only a next host can provide those. They are coupled to the window and next router appears to also patch react as well.

Avoid any import that starts with "next/"

[2heal1]

@ScriptedAlchemy I'm not sure ,will the problem be solved by setting nextjs-router as shared ?

Not work ... ignore this

[KyrieLii]

@2heal1 I have tried shared something, nextjs is a complex system ..

[ScriptedAlchemy]

Nexts router is an external that's set to the window by _app as window.NEXT_ROUTER

So the best thing would be to share modernjs router and link. Then use those in next.js instead. Using modernjs route system not next.

Next router only work with next host.

[jianingroja]

@KyrieLii @ScriptedAlchemy Thank you for the replies.

We are currently using Next.js page router, as it it supported with module federation next plugin.

As Zack you are suggesting to use modernjs router system, which is implemented on top of react route, I am thinking, does it mean to completely refactor/abandon next page router, and replace it with react router? As each route API of react router needs to be used in the context of a <Router> component. In the aspect of file structure, it means to have something like app router structure, but with react router under the hood?

In the end we are having an application that behaves and structured based on react router, but wrapper inside of next.js framework. I am finding it a bit tricky, would like to hear some insights about this.

Another problem is that our current nextjs application use heavily SSR, and react router depends heavily on document, which does not exist during SSR. Our teams are separated responsibility and maintaining independently different remote applications, that's why we are not migrating directly all our apps to Modern.js, and seeking this solution as a way of transition. What is your opinion about this situation? Should we migrate completely from Nextjs?

Thank you.