feat(nextjs-mf): add support for Next.js App Router #2002

prasannamestha · 2024-01-21T21:24:21Z

Description

This PR adds support for module federation in Next.js App Router. To use this simply pass next/navigation as a shared dependency.

Related Issue

Types of changes

Docs change / refactoring / dependency upgrade
Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)

Checklist

I have added tests to cover my changes.
All new and existing tests passed.
I have updated the documentation.

ScriptedAlchemy · 2024-01-21T22:01:11Z

packages/enhanced/src/lib/container/runtime/FederationRuntimePlugin.ts

@@ -151,7 +151,10 @@ class FederationRuntimePlugin {
            // TODO: maybe set this variable as constant is better https://github.com/webpack/webpack/blob/main/lib/config/defaults.js#L176
            entryItem.import = ['./src'];
          }
-          if (!entryItem.import.includes(entryFilePath)) {


We should not modify /enhanced in order to fix next.js

If you need to do this, we should add a hook or some option that we can pass down from next.js instead.

/enhanced needs to remain as pure as it can and not patch framework specific issues but rather bugs in webpack etc (like single runtime chunk) X

Yes, maybe we can add "exclude" option to allow users control whether add our federation runtime entry file.

@ScriptedAlchemy @ahabhgk How about adding exclude options to allow users control whether add our federation runtime entry file in rspack/webpack ?

yeah im good with that

ScriptedAlchemy · 2024-01-21T22:02:29Z

packages/nextjs-mf/README.md

+  filename: '',
+  remotes: {},
+  exposes: {},
+  shared: ['next/navigation'], // This is important!


Add this to internal.ts instead, where Next.js retrieves its default shares. Users do not need to add extra shared module to make it work

The reason I decided to use this was to ensure that defaultShared is not pased in app router. That creates issues with react-dom and react runtime.

It might be a better idea to add a new flag enableAppRouter in federation config - what do you think?

Okay got another idea - I'll try to figure out whether the project uses app router and do this implicitly.

What happens when if both pages and app router are used?

Will it break?

If so we can enable "appRouterOnly" mode so its either one or the other

Nope, it works with both app and pages router.. I have a change, will push the commit shortly.

Only thing left right now is to figure out a way to run this without modifying @module-federation/enhanced

ScriptedAlchemy · 2024-01-23T23:25:29Z

Okay, take a look at this branch. #2017

Might give you some ideas, but its still broken in the client, server works tho.

ManuelcsNuant · 2024-01-26T17:44:35Z

hello all,

any chance this gets merged soon? I'm getting error with "@module-federation/nextjs-mf@^8.1.7" Error: Failed to collect page data for /[locale]/backtest/[id] on NextJs 14 which I assume its because App router is not supported

Abhishrut-Peepultree · 2024-02-06T08:19:21Z

Hey all, I'm getting error "Uncaught TypeError: Cannot read properties of null (reading 'useContext')" while using useRouter() in the remote application. Does anyone have any clue how might this be resolved?

ManuelcsNuant · 2024-02-08T08:23:24Z

Hello everyone, sorry to bother again, will app router get supported any time soon? I'm using it with current page router but I want to integrate it with another nextjs that uses app router

yavuzsecer88 · 2024-02-20T14:44:11Z

Hi guys, is there any progress? Thanks in advance!

saeedghasemi72 · 2024-03-02T14:02:00Z

any news? and please add a example for next 14 (app router)

ScriptedAlchemy · 2024-03-07T05:28:29Z

No progress, i wouldnt expect it to be resolved anytime soon.

Jony-Y · 2024-03-14T13:46:12Z

@ScriptedAlchemy So, is the current statement to not use next14 with nextjs-mf? is it only for App router?
I want to know if we need to downgrade nextjs, or use native webpack?

Can you please confirm and provide the suggested solution?

ryok90 · 2024-03-14T13:50:28Z

@ScriptedAlchemy So, is the current statement to not use next14 with nextjs-mf? is it only for App router? I want to know if we need to downgrade nextjs, or use native webpack?

Can you please confirm and provide the suggested solution?

@Jony-Y
Only App router is not currently supported (independent of version).
Next.js v14 is working with Pages router.

phyolim · 2024-03-16T00:38:35Z

V14 doesn't work if I use any react client features ( like useState ) in remote component even in page router. I haven't tried with clean projects though.

ScriptedAlchemy · 2024-03-18T12:10:55Z

You can't have any app router at all. No folder called app. Whole thing must be only pages router.

App router will most likely never be supported.

Luferov · 2024-03-20T16:14:50Z

You can't have any app router at all. No folder called app. Whole thing must be only pages router.

App router will most likely never be supported.

Could you say, is this a statement that there will never be micro frontends in app router?

sethjeffery · 2024-03-20T17:36:49Z

That would be a presumptive statement, I am sure vercel/nextjs would want to support micro-frontend architecture in some form, but based on experience they will likely provide their own solution at some point and push to make it a standard.

ScriptedAlchemy · 2024-03-23T13:19:29Z

There will never be module federation with app router, not my ecosystem - not for next.js

Vercel will make proprietary system for app router most likely.

burakakca · 2024-08-19T18:44:32Z

There is an application and it's using the app router and pages structure (95%), I want to use mf in that project but "App Directory is not supported by nextjs-mf. Use only pages directory, do not open git issues about this" error accrued. How can I fix that. Should I need to copy app folder codes to pages structure ? or there is a work around? @ScriptedAlchemy

VladSam42 · 2024-09-03T22:31:24Z

There will never be module federation with app router, not my ecosystem - not for next.js

Vercel will make proprietary system for app router most likely.

@ScriptedAlchemy , what exactly is the issue? Is this because they switched to SWC? They are pushing the app router very hard and probably will deprecate the page router sooner or later

kacemws · 2024-09-10T12:32:23Z

There will never be module federation with app router, not my ecosystem - not for next.js
Vercel will make proprietary system for app router most likely.

@ScriptedAlchemy , what exactly is the issue? Is this because they switched to SWC? They are pushing the app router very hard and probably will deprecate the page router sooner or later

you can try to use Multizone, other than that i think that we are cooked :/

github-actions bot added the change: feat label Jan 21, 2024

prasannamestha force-pushed the pm/support-app-router branch 3 times, most recently from 99b2cff to fd98cb2 Compare January 21, 2024 21:33

ScriptedAlchemy requested changes Jan 21, 2024

View reviewed changes

feat(nextjs-mf): add support for Next.js App Router

2939201

prasannamestha force-pushed the pm/support-app-router branch from fd98cb2 to 2939201 Compare January 23, 2024 20:32

style(nextjs-mf): rename variables in next-fragment test

3e3af3a

prasannamestha force-pushed the pm/support-app-router branch from 9d0271a to 3e3af3a Compare January 23, 2024 20:38

Akshay090 mentioned this pull request Feb 6, 2024

App router support module-federation/module-federation-examples#3623

Closed

ScriptedAlchemy closed this Mar 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(nextjs-mf): add support for Next.js App Router #2002

feat(nextjs-mf): add support for Next.js App Router #2002

prasannamestha commented Jan 21, 2024 •

edited

Loading

ScriptedAlchemy Jan 21, 2024

2heal1 Jan 22, 2024

2heal1 Jan 22, 2024

ScriptedAlchemy Jan 23, 2024

ScriptedAlchemy Jan 21, 2024

prasannamestha Jan 21, 2024

prasannamestha Jan 22, 2024

ScriptedAlchemy Jan 23, 2024

prasannamestha Jan 23, 2024

ScriptedAlchemy commented Jan 23, 2024

ManuelcsNuant commented Jan 26, 2024

Abhishrut-Peepultree commented Feb 6, 2024

ManuelcsNuant commented Feb 8, 2024

yavuzsecer88 commented Feb 20, 2024

saeedghasemi72 commented Mar 2, 2024

ScriptedAlchemy commented Mar 7, 2024

Jony-Y commented Mar 14, 2024

ryok90 commented Mar 14, 2024

phyolim commented Mar 16, 2024 •

edited

Loading

ScriptedAlchemy commented Mar 18, 2024

Luferov commented Mar 20, 2024

sethjeffery commented Mar 20, 2024 •

edited

Loading

ScriptedAlchemy commented Mar 23, 2024

burakakca commented Aug 19, 2024 •

edited

Loading

VladSam42 commented Sep 3, 2024

kacemws commented Sep 10, 2024

feat(nextjs-mf): add support for Next.js App Router #2002

feat(nextjs-mf): add support for Next.js App Router #2002

Conversation

prasannamestha commented Jan 21, 2024 • edited Loading

Description

Related Issue

Types of changes

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ScriptedAlchemy commented Jan 23, 2024

ManuelcsNuant commented Jan 26, 2024

Abhishrut-Peepultree commented Feb 6, 2024

ManuelcsNuant commented Feb 8, 2024

yavuzsecer88 commented Feb 20, 2024

saeedghasemi72 commented Mar 2, 2024

ScriptedAlchemy commented Mar 7, 2024

Jony-Y commented Mar 14, 2024

ryok90 commented Mar 14, 2024

phyolim commented Mar 16, 2024 • edited Loading

ScriptedAlchemy commented Mar 18, 2024

Luferov commented Mar 20, 2024

sethjeffery commented Mar 20, 2024 • edited Loading

ScriptedAlchemy commented Mar 23, 2024

burakakca commented Aug 19, 2024 • edited Loading

VladSam42 commented Sep 3, 2024

kacemws commented Sep 10, 2024

prasannamestha commented Jan 21, 2024 •

edited

Loading

phyolim commented Mar 16, 2024 •

edited

Loading

sethjeffery commented Mar 20, 2024 •

edited

Loading

burakakca commented Aug 19, 2024 •

edited

Loading