Fix worker runtime chunk regressing web worker builds

.changeset/steady-workers-remotes.md

@@ -0,0 +1,5 @@
+---
+"@module-federation/enhanced": patch
+---
+
+Keep async entry runtime helpers available when cloning runtimes for web workers and other dynamic entrypoints.

.env

@@ -1 +1,2 @@
 NX_DEAMON=false
+NX_DAEMON=false

.github/workflows/e2e-runtime.yml

@@ -62,4 +62,4 @@ jobs:
 
       - name: E2E Test for Runtime Demo
         if: steps.check-ci.outcome == 'success'
-        run: npx kill-port --port 3005,3006,3007 && pnpm run app:runtime:dev & echo "done" && sleep 20 && npx nx run-many --target=test:e2e --projects=3005-runtime-host --parallel=1 && lsof -ti tcp:3005,3006,3007 | xargs kill
+        run: node tools/scripts/run-runtime-e2e.mjs --mode=dev

apps/runtime-demo/3005-runtime-host/cypress/e2e/app.cy.ts

@@ -77,4 +77,19 @@ describe('3005-runtime-host/', () => {
       });
     });
   });
+
+  describe('web worker check', () => {
+    it('should display value returned from worker', () => {
+      cy.get('.worker-native-result').should('contain.text', '"answer": "1"');
+      cy.get('.worker-native-result').should(
+        'contain.text',
+        '"federationKeys"',
+      );
+      cy.get('.worker-loader-result').should('contain.text', '"answer": "1"');
+      cy.get('.worker-loader-result').should(
+        'contain.text',
+        '"federationKeys"',
+      );
+    });
+  });
 });

apps/runtime-demo/3005-runtime-host/package.json

@@ -2,16 +2,25 @@
   "name": "runtime-host",
   "private": true,
   "version": "0.0.0",
+  "scripts": {
+    "build": "webpack --config webpack.config.js --mode production",
+    "build:development": "webpack --config webpack.config.js --mode development",
+    "serve": "webpack serve --config webpack.config.js --mode development --host 127.0.0.1 --port 3005 --allowed-hosts all",
+    "serve:production": "webpack serve --config webpack.config.js --mode production --host 127.0.0.1 --port 3005 --allowed-hosts all --no-hot"
+  },
   "devDependencies": {
     "@module-federation/core": "workspace:*",
+    "@module-federation/dts-plugin": "workspace:*",
+    "@module-federation/enhanced": "workspace:*",
     "@module-federation/runtime": "workspace:*",
     "@module-federation/typescript": "workspace:*",
-    "@module-federation/enhanced": "workspace:*",
-    "@module-federation/dts-plugin": "workspace:*",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
-    "react-refresh": "0.14.2",
     "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0"
+    "@types/react-dom": "18.3.0",
+    "mini-css-extract-plugin": "2.9.2",
+    "react-refresh": "0.14.2",
+    "css-loader": "6.11.0",
+    "webpack-dev-server": "5.1.0"
   },
   "dependencies": {
     "antd": "4.24.15",

apps/runtime-demo/3005-runtime-host/project.json

@@ -6,35 +6,21 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@nx/webpack:webpack",
-      "outputs": ["{options.outputPath}"],
+      "executor": "nx:run-commands",
+      "outputs": ["{projectRoot}/dist"],
       "defaultConfiguration": "production",
       "options": {
-        "compiler": "babel",
-        "outputPath": "apps/runtime-demo/3005-runtime-host/dist",
-        "index": "apps/runtime-demo/3005-runtime-host/src/index.html",
-        "baseHref": "/",
-        "main": "apps/runtime-demo/3005-runtime-host/src/index.ts",
-        "tsConfig": "apps/runtime-demo/3005-runtime-host/tsconfig.app.json",
-        "styles": [],
-        "scripts": [],
-        "webpackConfig": "apps/runtime-demo/3005-runtime-host/webpack.config.js",
-        "babelUpwardRootMode": true
+        "command": "pnpm run build",
+        "cwd": "apps/runtime-demo/3005-runtime-host"
       },
       "configurations": {
         "development": {
-          "extractLicenses": false,
-          "optimization": false,
-          "sourceMap": true,
-          "vendorChunk": true
+          "command": "pnpm run build:development",
+          "cwd": "apps/runtime-demo/3005-runtime-host"
         },
         "production": {
-          "optimization": true,
-          "outputHashing": "all",
-          "sourceMap": false,
-          "namedChunks": false,
-          "extractLicenses": false,
-          "vendorChunk": false
+          "command": "pnpm run build",
+          "cwd": "apps/runtime-demo/3005-runtime-host"
         }
       },
       "dependsOn": [
@@ -45,21 +31,20 @@
       ]
     },
     "serve": {
-      "executor": "@nx/webpack:dev-server",
+      "executor": "nx:run-commands",
       "defaultConfiguration": "production",
       "options": {
-        "buildTarget": "3005-runtime-host:build",
-        "hmr": true,
-        "port": 3005,
-        "devRemotes": ["3006-runtime-remote"]
+        "command": "pnpm run serve:production",
+        "cwd": "apps/runtime-demo/3005-runtime-host"
       },
       "configurations": {
         "development": {
-          "buildTarget": "3005-runtime-host:build:development"
+          "command": "pnpm run serve",
+          "cwd": "apps/runtime-demo/3005-runtime-host"
         },
         "production": {
-          "buildTarget": "3005-runtime-host:build:production",
-          "hmr": false
+          "command": "pnpm run serve:production",
+          "cwd": "apps/runtime-demo/3005-runtime-host"
         }
       },
       "dependsOn": [

apps/runtime-demo/3005-runtime-host/src/Root.tsx

@@ -5,6 +5,8 @@ import WebpackPng from './webpack.png';
 import WebpackSvg from './webpack.svg';
 import { WebpackPngRemote, WebpackSvgRemote } from './Remote1';
 import Remote2 from './Remote2';
+import WorkerNativeDemo from './components/WorkerNativeDemo';
+import WorkerLoaderDemo from './components/WorkerLoaderDemo';
 
 const Root = () => (
   <div>
@@ -89,6 +91,40 @@ const Root = () => (
         </tr>
       </tbody>
     </table>
+
+    <h3>check workers</h3>
+    <table border={1} cellPadding={5}>
+      <thead>
+        <tr>
+          <td></td>
+          <td>Test case</td>
+          <td>Expected</td>
+          <td>Actual</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>✅</td>
+          <td>Native new Worker(new URL(...))</td>
+          <td>
+            <div className="worker-expected">Expected worker response: 1</div>
+          </td>
+          <td>
+            <WorkerNativeDemo />
+          </td>
+        </tr>
+        <tr>
+          <td>✅</td>
+          <td>worker-loader integration</td>
+          <td>
+            <div className="worker-expected">Expected worker response: 1</div>
+          </td>
+          <td>
+            <WorkerLoaderDemo />
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 );
 

apps/runtime-demo/3005-runtime-host/src/components/WorkerLoaderDemo.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+export function WorkerLoaderDemo() {
+  const [result, setResult] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    try {
+      const worker = new Worker(
+        new URL('../worker/loader-worker.js', import.meta.url),
+        {
+          name: 'mf-loader-worker',
+        },
+      );
+
+      worker.onmessage = (event) => {
+        setResult(event.data ?? null);
+      };
+
+      worker.onerror = (event) => {
+        setError((event as unknown as ErrorEvent).message ?? 'Worker error');
+      };
+
+      worker.postMessage({ value: 'foo' });
+
+      return () => {
+        worker.terminate();
+      };
+    } catch (err) {
+      setError((err as Error).message);
+    }
+
+    return undefined;
+  }, []);
+
+  return (
+    <div>
+      <div className="worker-expected">Expected worker response: 1</div>
+      <pre className="worker-loader-result">
+        {result ? JSON.stringify(result, null, 2) : 'n/a'}
+      </pre>
+      {error ? <div className="worker-error">Worker error: {error}</div> : null}
+    </div>
+  );
+}
+
+export default WorkerLoaderDemo;

apps/runtime-demo/3005-runtime-host/src/components/WorkerNativeDemo.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+
+export function WorkerNativeDemo() {
+  const [result, setResult] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    try {
+      const worker = new Worker(
+        new URL('../worker/native-worker.js', import.meta.url),
+        {
+          name: 'mf-native-worker',
+        },
+      );
+
+      worker.onmessage = (event) => {
+        setResult(event.data ?? null);
+      };
+
+      worker.onerror = (event) => {
+        setError((event as unknown as ErrorEvent).message ?? 'Worker error');
+      };
+
+      worker.postMessage({ value: 'foo' });
+
+      return () => {
+        worker.terminate();
+      };
+    } catch (err) {
+      setError((err as Error).message);
+    }
+
+    return undefined;
+  }, []);
+
+  return (
+    <div>
+      <pre className="worker-native-result">
+        {result ? JSON.stringify(result, null, 2) : 'n/a'}
+      </pre>
+      {error ? <div className="worker-error">Worker error: {error}</div> : null}
+    </div>
+  );
+}
+
+export default WorkerNativeDemo;

apps/runtime-demo/3005-runtime-host/src/worker/loader-worker.js

@@ -0,0 +1,15 @@
+/* eslint-env worker */
+import { workerMap } from './map.js';
+
+self.onmessage = (event) => {
+  const value = event.data && event.data.value;
+  const federation =
+    typeof __webpack_require__ !== 'undefined'
+      ? __webpack_require__.federation || {}
+      : {};
+  const federationKeys = Object.keys(federation);
+  self.postMessage({
+    answer: workerMap[value] ?? null,
+    federationKeys,
+  });
+};

apps/runtime-demo/3005-runtime-host/src/worker/map.js

@@ -0,0 +1,4 @@
+export const workerMap = {
+  foo: '1',
+  bar: '2',
+};

apps/runtime-demo/3005-runtime-host/src/worker/native-worker.js

@@ -0,0 +1,15 @@
+/* eslint-env worker */
+import { workerMap } from './map.js';
+
+self.onmessage = (event) => {
+  const value = event.data && event.data.value;
+  const federation =
+    typeof __webpack_require__ !== 'undefined'
+      ? __webpack_require__.federation || {}
+      : {};
+  const federationKeys = Object.keys(federation);
+  self.postMessage({
+    answer: workerMap[value] ?? null,
+    federationKeys,
+  });
+};

apps/runtime-demo/3005-runtime-host/src/worker/worker.js

@@ -0,0 +1,9 @@
+/* eslint-env worker */
+import { workerMap } from './map';
+
+self.onmessage = (event) => {
+  const value = event.data && event.data.value;
+  self.postMessage({
+    answer: workerMap[value] ?? null,
+  });
+};