fix(nextjs-mf): Do not attach runtime to api runtime chunks (#2571)

Co-authored-by: ScriptedAlchemy <[email protected]>

Author: ScriptedAlchemy

.changeset/sharp-dryers-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/enhanced': patch
+---
+
+Wrap require of federation runtime module in conditional so that async boundary plugin doesnt crash runtimes who do not implement federation

.github/workflows/build-and-test.yml

@@ -46,26 +46,26 @@ jobs:
       - name: Run Affected Test
         run: npx nx affected -t test --parallel=3 --exclude='*,!tag:type:pkg' --skip-cache
 
-      # - name: E2E Test for Next.js Dev
-      #   run: |
-      #     pnpm run app:next:dev &
-      #     sleep 1 &&
-      #     npx wait-on tcp:3001 &&
-      #     npx wait-on tcp:3002 &&
-      #     npx wait-on tcp:3000 &&
-      #     npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=2 &&
-      #     lsof -ti tcp:3000,3001,3002 | xargs kill
-
-      # - name: E2E Test for Next.js Prod
-      #   run: |
-      #     pnpm run --filter @module-federation/3002-checkout --filter @module-federation/3000-home --filter @module-federation/3001-shop build &&
-      #     pnpm run app:next:prod &
-      #     sleep 2 &&
-      #     npx wait-on tcp:3001 &&
-      #     npx wait-on tcp:3002 &&
-      #     npx wait-on tcp:3000 &&
-      #     npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=1 &&
-      #     lsof -ti tcp:3000,3001,3002 | xargs kill
+      - name: E2E Test for Next.js Dev
+        run: |
+          pnpm run app:next:dev > /dev/null 2>&1 &
+          sleep 1 &&
+          npx wait-on tcp:3001 &&
+          npx wait-on tcp:3002 &&
+          npx wait-on tcp:3000 &&
+          npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=3 &&
+          lsof -ti tcp:3000,3001,3002 | xargs kill
+
+      - name: E2E Test for Next.js Prod
+        run: |
+          pnpm run --filter @module-federation/3002-checkout --filter @module-federation/3000-home --filter @module-federation/3001-shop build &&
+          pnpm run app:next:prod &
+          sleep 2 &&
+          npx wait-on tcp:3001 &&
+          npx wait-on tcp:3002 &&
+          npx wait-on tcp:3000 &&
+          npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=1 &&
+          lsof -ti tcp:3000,3001,3002 | xargs kill
 
       - name: E2E Test for ModernJS
         run: npx nx run-many --target=test:e2e --projects=modernjs --parallel=1 && lsof -ti tcp:4001 | xargs kill

packages/enhanced/src/lib/container/AsyncBoundaryPlugin.ts

@@ -314,7 +314,11 @@ class AsyncEntryStartupPlugin {
 
         if (shouldInclude) {
           initialEntryModules.push(
-            `__webpack_require__(${JSON.stringify(entryModuleID)});`,
+            `if(__webpack_require__.m[${JSON.stringify(entryModuleID)}]) {
+              __webpack_require__(${JSON.stringify(entryModuleID)});
+            } else {
+              console.warn('Federation Runtime Module not found. In the current runtime');
+            }`,
           );
         }
       }

packages/nextjs-mf/src/plugins/container/InvertedContainerRuntimeModule.ts

@@ -31,6 +31,9 @@ class InvertedContainerRuntimeModule extends RuntimeModule {
       return '';
     }
 
+    if (this.chunk.runtime === 'webpack-api-runtime') {
+      return '';
+    }
     const { name } = this.options;
     const containerEntryModule = this.findEntryModuleOfContainer() as
       | Module