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

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)) {
+          if (
+            !entryItem.import.includes(entryFilePath) &&
+            entryItem.layer !== 'rsc' // TODO: remove this when adding support for RSC
+          ) {
             entryItem.import.unshift(entryFilePath);
           }
         });

packages/nextjs-mf/README.md

@@ -12,8 +12,9 @@ This plugin enables Module Federation on Next.js
 
 ## Supports
 
-- next ^13 || ^12(?)
+- next ^14 || ^13 || ^12(?)
 - SSR included!
+- App router included (experimental)
 
 I highly recommend referencing this application which takes advantage of the best capabilities:
 https://github.com/module-federation/module-federation-examples
@@ -257,16 +258,16 @@ const SampleComponent = lazy(() => import('next2/sampleComponent'));
 
 import Sample from 'next2/sampleComponent';
 ```
-## RuntimePlugins 
+
+## RuntimePlugins
+
 To provide extensibility and "middleware" for federation, you can refer to `@module-federation/runtime`
 
 ```js
 // next.config.js
 new NextFederationPlugin({
-  runtimePlugins: [
-    require.resolve('./path/to/myRuntimePlugin.js')
-  ]
-})
+  runtimePlugins: [require.resolve('./path/to/myRuntimePlugin.js')],
+});
 ```
 
 ## Utilities

packages/nextjs-mf/src/plugins/NextFederationPlugin/index.ts

@@ -14,7 +14,11 @@ import type { Compiler } from 'webpack';
 import { getWebpackPath } from '@module-federation/sdk/normalize-webpack-path';
 import CopyFederationPlugin from '../CopyFederationPlugin';
 import { exposeNextjsPages } from '../../loaders/nextPageMapLoader';
-import { retrieveDefaultShared, applyPathFixes } from './next-fragments';
+import {
+  retrieveDefaultShared,
+  applyPathFixes,
+  hasAppDir,
+} from './next-fragments';
 import { setOptions } from './set-options';
 import {
   validateCompilerOptions,
@@ -127,6 +131,15 @@ export class NextFederationPlugin {
     isServer: boolean,
   ): ModuleFederationPluginOptions {
     const defaultShared = retrieveDefaultShared(isServer);
+
+    if (hasAppDir(compiler)) {
+      // These shared deps cause issues with the appDir. Any ideas around this?
+      delete defaultShared['react'];
+      delete defaultShared['react/'];
+      delete defaultShared['react-dom'];
+      delete defaultShared['react-dom/'];
+    }
+
     const noop = this.getNoopPath();
     return {
       ...this._options,

packages/nextjs-mf/src/plugins/NextFederationPlugin/next-fragment.test.ts

@@ -0,0 +1,13 @@
+import { hasAppDir } from './next-fragments';
+
+describe('hasAppDir', () => {
+  it('should return true if app directory exists', () => {
+    const compiler = {
+      options: {
+        resolve: { alias: { 'private-next-app-dir': 'test' } },
+      },
+    };
+    // @ts-ignore - not a full `compiler` object
+    expect(hasAppDir(compiler)).toEqual(true);
+  });
+});

packages/nextjs-mf/src/plugins/NextFederationPlugin/next-fragments.ts

@@ -1,6 +1,7 @@
 import type { container, Compiler } from 'webpack';
 import type {
   ModuleFederationPluginOptions,
+  Shared,
   SharedObject,
 } from '@module-federation/utilities';
 import {
@@ -21,6 +22,7 @@ export const retrieveDefaultShared = (isServer: boolean): SharedObject => {
   if (isServer) {
     return DEFAULT_SHARE_SCOPE;
   }
+
   // If the code is running on the client/browser, always bundle Next.js internals
   return DEFAULT_SHARE_SCOPE_BROWSER;
 };
@@ -58,10 +60,16 @@ export const applyPathFixes = (compiler: Compiler, options: any) => {
     if (rule?.oneOf) {
       //@ts-ignore
       rule.oneOf.forEach((oneOfRule) => {
-        if (hasLoader(oneOfRule, 'react-refresh-utils')) {
+        if (hasLoader(oneOfRule, 'react-refresh-utils') && oneOfRule.exclude) {
           oneOfRule.exclude = [oneOfRule.exclude, /universe\/packages/];
         }
       });
     }
   });
 };
+
+export const hasAppDir = (compiler: Compiler) => {
+  return Object.keys(compiler.options.resolve.alias || {}).includes(
+    'private-next-app-dir',
+  );
+};