fix(nextjs-mf): simplify handling of server externals (#3114)

module-federation · Oct 23, 2024 · d3e904b · d3e904b
1 parent ac46d9e
commit d3e904b
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 46 deletions.
diff --git a/.changeset/ai-brave-wolf.md b/.changeset/ai-brave-wolf.md
@@ -0,0 +1,10 @@
+---
+"@module-federation/nextjs-mf": patch
+---
+
+Support Next 15 externals configuration
+
+- Refactored external handling to dynamically find and replace the first function in the 'externals' array.
+- This change improves robustness by ensuring the system correctly overrides external functions regardless of their position in the list.
+- Maintained the existing logic to preserve intended behavior with conditions checking specific package prefixes and names.
+```
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "prepare": "husky install",
     "changeset": "changeset",
     "build:packages": "npx nx affected -t build --parallel=10 --exclude='*,!tag:type:pkg'",
-    "changegen": "./changeset-gen.js --path ./packages/enhanced --staged && ./changeset-gen.js --path ./packages/runtime --staged && ./changeset-gen.js --path ./packages/data-prefetch --staged",
+    "changegen": "./changeset-gen.js --path ./packages/enhanced --staged && ./changeset-gen.js --path ./packages/runtime --staged && ./changeset-gen.js --path ./packages/data-prefetch --staged && ./changeset-gen.js --path ./packages/nextjs-mf --staged",
     "commitgen:staged": "./commit-gen.js --path ./packages --staged",
     "commitgen:main": "./commit-gen.js --path ./packages"
   },

diff --git a/packages/nextjs-mf/src/plugins/NextFederationPlugin/apply-server-plugins.ts b/packages/nextjs-mf/src/plugins/NextFederationPlugin/apply-server-plugins.ts
@@ -107,54 +107,57 @@ export function handleServerExternals(
   compiler: Compiler,
   options: moduleFederationPlugin.ModuleFederationPluginOptions,
 ): void {
-  if (
-    Array.isArray(compiler.options.externals) &&
-    typeof compiler.options.externals[0] === 'function'
-  ) {
-    const originalExternals = compiler.options.externals[0] as (
-      data: ExternalItemFunctionData,
-      callback: any,
-    ) => undefined | string;
+  if (Array.isArray(compiler.options.externals)) {
+    const functionIndex = compiler.options.externals.findIndex(
+      (external) => typeof external === 'function',
+    );
 
-    compiler.options.externals[0] = async function (
-      ctx: ExternalItemFunctionData,
-      callback: any,
-    ) {
-      const fromNext = await originalExternals(ctx, callback);
-      if (!fromNext) {
-        return;
-      }
-      const req = fromNext.split(' ')[1];
-      if (
-        ctx.request &&
-        (ctx.request.includes('@module-federation/utilities') ||
-          Object.keys(options.shared || {}).some((key) => {
-            const sharedOptions = options.shared as Record<
-              string,
-              { import: boolean }
-            >;
-            return (
-              sharedOptions[key]?.import !== false &&
-              (key.endsWith('/') ? req.includes(key) : req === key)
-            );
-          }) ||
-          ctx.request.includes('@module-federation/'))
-      ) {
-        return;
-      }
+    if (functionIndex !== -1) {
+      const originalExternals = compiler.options.externals[functionIndex] as (
+        data: ExternalItemFunctionData,
+        callback: any,
+      ) => undefined | string;
 
-      if (
-        req.startsWith('next') ||
-        req.startsWith('react/') ||
-        req.startsWith('react-dom/') ||
-        req === 'react' ||
-        req === 'styled-jsx/style' ||
-        req === 'react-dom'
+      compiler.options.externals[functionIndex] = async function (
+        ctx: ExternalItemFunctionData,
+        callback: any,
       ) {
-        return fromNext;
-      }
-      return;
-    };
+        const fromNext = await originalExternals(ctx, callback);
+        if (!fromNext) {
+          return;
+        }
+        const req = fromNext.split(' ')[1];
+        if (
+          ctx.request &&
+          (ctx.request.includes('@module-federation/utilities') ||
+            Object.keys(options.shared || {}).some((key) => {
+              const sharedOptions = options.shared as Record<
+                string,
+                { import: boolean }
+              >;
+              return (
+                sharedOptions[key]?.import !== false &&
+                (key.endsWith('/') ? req.includes(key) : req === key)
+              );
+            }) ||
+            ctx.request.includes('@module-federation/'))
+        ) {
+          return;
+        }
+
+        if (
+          req.startsWith('next') ||
+          req.startsWith('react/') ||
+          req.startsWith('react-dom/') ||
+          req === 'react' ||
+          req === 'styled-jsx/style' ||
+          req === 'react-dom'
+        ) {
+          return fromNext;
+        }
+        return;
+      };
+    }
   }
 }