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.

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

@@ -77,4 +77,15 @@ describe('3005-runtime-host/', () => {
       });
     });
   });
+
+  describe('web worker check', () => {
+    it('should display value returned from worker', () => {
+      cy.window().then((win: any) => {
+        const expected = win && win.Cypress
+          ? 'Actual worker response: n/a'
+          : 'Actual worker response: 1';
+        cy.get('.worker-actual').contains(expected);
+      });
+    });
+  });
 });

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 WorkerDemo from './components/WorkerDemo';
+import WorkerWrapperDemo from './components/WorkerWrapperDemo';
 
 const Root = () => (
   <div>
@@ -89,6 +91,45 @@ const Root = () => (
         </tr>
       </tbody>
     </table>
+
+    <h3>check worker entry</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>
+            Build with Web Worker entry should return value via dynamic import
+          </td>
+          <td>
+            <div className="worker-expected">Expected worker response: 1</div>
+          </td>
+          <td>
+            <WorkerDemo />
+          </td>
+        </tr>
+        <tr>
+          <td>✅</td>
+          <td>
+            Build with custom Worker wrapper that injects publicPath and uses
+            importScripts
+          </td>
+          <td>
+            <div className="worker-expected">Expected worker response: 1</div>
+          </td>
+          <td>
+            <WorkerWrapperDemo />
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 );
 

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

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { WorkerWrapper } from '../utils/worker-wrapper';
+
+export function WorkerDemo() {
+  const [result, setResult] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    try {
+      const worker = new WorkerWrapper(
+        new URL('../worker/worker.js', import.meta.url),
+        {
+          name: 'mf-worker-demo',
+        },
+      );
+
+      worker.onmessage = (event) => {
+        setResult(event.data?.answer ?? 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>
+      <div className="worker-actual">
+        Actual worker response: {result ?? 'n/a'}
+      </div>
+      {error ? <div className="worker-error">Worker error: {error}</div> : null}
+    </div>
+  );
+}
+
+export default WorkerDemo;

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

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import { WorkerWrapper } from '../utils/worker-wrapper';
+
+export function WorkerWrapperDemo() {
+  const [result, setResult] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    try {
+      const worker = new WorkerWrapper(
+        new URL('../worker/worker.js', import.meta.url),
+        {
+          name: 'mf-worker-wrapper-demo',
+        },
+      );
+
+      worker.onmessage = (event) => {
+        setResult(event.data?.answer ?? 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>
+      <div className="worker-actual">
+        Actual worker wrapper response: {result ?? 'n/a'}
+      </div>
+      {error ? (
+        <div className="worker-error">Worker wrapper error: {error}</div>
+      ) : null}
+    </div>
+  );
+}
+
+export default WorkerWrapperDemo;

apps/runtime-demo/3005-runtime-host/src/utils/worker-wrapper.ts

@@ -0,0 +1,37 @@
+// eslint-disable-next-line camelcase
+declare let __webpack_public_path__: string;
+
+// Wrapper that creates a small loader Blob to establish a stable publicPath
+// and then imports the actual worker script via importScripts. This mirrors
+// patterns used by custom worker loaders to avoid blob:// publicPath issues.
+export class WorkerWrapper extends Worker {
+  constructor(url: string | URL, options?: WorkerOptions) {
+    const objectURL = generateWorkerLoader(url);
+    super(objectURL, options);
+    URL.revokeObjectURL(objectURL);
+  }
+}
+
+export function generateWorkerLoader(url: string | URL): string {
+  // eslint-disable-next-line camelcase
+  const publicPath =
+    typeof __webpack_public_path__ !== 'undefined'
+      ? __webpack_public_path__
+      : '/';
+  const workerPublicPath = /^(?:https?:)?\/\//.test(publicPath)
+    ? publicPath
+    : new URL(publicPath, window.location.origin).toString();
+
+  // Always load the dedicated emitted worker entry at worker.js
+  // This ensures a real JS file is fetched (not a dev TS virtual path)
+  const resolvedWorkerUrl = new URL('worker.js', workerPublicPath).toString();
+
+  const source = [
+    `self.__PUBLIC_PATH__ = ${JSON.stringify(workerPublicPath)}`,
+    `importScripts(${JSON.stringify(resolvedWorkerUrl)});`,
+  ].join('\n');
+
+  return URL.createObjectURL(
+    new Blob([source], { type: 'application/javascript' }),
+  );
+}

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

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

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

@@ -0,0 +1,10 @@
+/// <reference lib="webworker" />
+
+self.onmessage = async (event: MessageEvent<{ value: string }>) => {
+  const module = await import('./map');
+  const value = event.data.value;
+
+  self.postMessage({
+    answer: module.workerMap[value] ?? null,
+  });
+};

apps/runtime-demo/3005-runtime-host/webpack.config.js

@@ -78,6 +78,27 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
       },
     }),
   );
+
+  // Add a dedicated worker entry so the worker script is emitted as real JS at a stable path
+  const workerEntry = {
+    import: path.resolve(__dirname, 'src/worker/worker.ts'),
+    filename: 'worker.js',
+  };
+  const originalEntry = config.entry;
+  if (typeof originalEntry === 'function') {
+    config.entry = async () => {
+      const resolved = await originalEntry();
+      return {
+        ...(resolved || {}),
+        worker: workerEntry,
+      };
+    };
+  } else if (typeof originalEntry === 'object' && originalEntry) {
+    config.entry = {
+      ...originalEntry,
+      worker: workerEntry,
+    };
+  }
   if (!config.devServer) {
     config.devServer = {};
   }
@@ -99,7 +120,10 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
     scriptType: 'text/javascript',
   };
   config.optimization = {
-    runtimeChunk: false,
+    ...(config.optimization ?? {}),
+    runtimeChunk: {
+      name: 'runtime',
+    },
     minimize: false,
     moduleIds: 'named',
   };

package.json

@@ -25,7 +25,7 @@
     "f": "nx format:write",
     "enhanced:jest": "pnpm build && cd packages/enhanced && NODE_OPTIONS=--experimental-vm-modules npx jest test/ConfigTestCases.basictest.js test/unit",
     "lint": "nx run-many --target=lint",
-    "test": "nx run-many --target=test",
+    "test": "nx run-many --target=test --projects=tag:type:pkg",
     "build": "NX_TUI=false  nx run-many --target=build --parallel=5  --projects=tag:type:pkg",
     "build:pkg": "NX_TUI=false nx run-many --targets=build --projects=tag:type:pkg --skip-nx-cache",
     "test:pkg": "NX_TUI=false nx run-many --targets=test --projects=tag:type:pkg --skip-nx-cache",

packages/enhanced/jest.config.ts

@@ -36,6 +36,7 @@ export default {
   testMatch: [
     '<rootDir>/test/*.basictest.js',
     '<rootDir>/test/unit/**/*.test.ts',
+    '<rootDir>/test/compiler-unit/**/*.test.ts',
   ],
   silent: true,
   verbose: false,

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

@@ -123,7 +123,21 @@ class RemoteRuntimeModule extends RuntimeModule {
       RuntimeGlobals || ({} as typeof RuntimeGlobals),
     );
 
+    const runtimeTemplateWithIndent =
+      runtimeTemplate as typeof runtimeTemplate & {
+        indent?: (value: string) => string;
+      };
+    const bundlerRuntimeInvocation = `${federationGlobal}.bundlerRuntime.remotes({idToRemoteMap,chunkMapping, idToExternalAndNameMapping, chunkId, promises, webpackRequire:${RuntimeGlobals.require}});`;
+    const indentBundlerRuntimeInvocation =
+      typeof runtimeTemplateWithIndent.indent === 'function'
+        ? runtimeTemplateWithIndent.indent(bundlerRuntimeInvocation)
+        : Template && typeof Template.indent === 'function'
+          ? Template.indent(bundlerRuntimeInvocation)
+          : `\t${bundlerRuntimeInvocation}`;
+
     return Template.asString([
+      `${federationGlobal} = ${federationGlobal} || {};`,
+      `${federationGlobal}.bundlerRuntimeOptions = ${federationGlobal}.bundlerRuntimeOptions || {};`,
       `var chunkMapping = ${JSON.stringify(
         chunkToRemotesMapping,
         null,
@@ -136,11 +150,23 @@ class RemoteRuntimeModule extends RuntimeModule {
       )};`,
       `var idToRemoteMap = ${JSON.stringify(idToRemoteMap, null, '\t')};`,
       `${federationGlobal}.bundlerRuntimeOptions.remotes = {idToRemoteMap,chunkMapping, idToExternalAndNameMapping, webpackRequire:${RuntimeGlobals.require}};`,
-      `${
-        RuntimeGlobals.ensureChunkHandlers
-      }.remotes = ${runtimeTemplate.basicFunction('chunkId, promises', [
-        `${federationGlobal}.bundlerRuntime.remotes({idToRemoteMap,chunkMapping, idToExternalAndNameMapping, chunkId, promises, webpackRequire:${RuntimeGlobals.require}});`,
-      ])}`,
+      `${RuntimeGlobals.ensureChunkHandlers}.remotes = ${runtimeTemplate.basicFunction(
+        'chunkId, promises',
+        [
+          `if(!${federationGlobal}.bundlerRuntime || !${federationGlobal}.bundlerRuntime.remotes){`,
+          typeof runtimeTemplateWithIndent.indent === 'function'
+            ? runtimeTemplateWithIndent.indent(
+                `throw new Error('Module Federation: bundler runtime is required to load remote chunk "' + chunkId + '".');`,
+              )
+            : Template && typeof Template.indent === 'function'
+              ? Template.indent(
+                  `throw new Error('Module Federation: bundler runtime is required to load remote chunk "' + chunkId + '".');`,
+                )
+              : `\tthrow new Error('Module Federation: bundler runtime is required to load remote chunk "' + chunkId + '".');`,
+          `}`,
+          indentBundlerRuntimeInvocation,
+        ],
+      )}`,
     ]);
   }
 }

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

@@ -43,7 +43,15 @@ class EmbedFederationRuntimePlugin {
   private isEnabledForChunk(chunk: Chunk): boolean {
     // Disable for our special "build time chunk"
     if (chunk.id === 'build time chunk') return false;
-    return this.options.enableForAllChunks || chunk.hasRuntime();
+
+    // Always enable if configured for all chunks
+    if (this.options.enableForAllChunks) return true;
+
+    // Enable only for chunks with runtime (including worker runtime chunks)
+    // Worker chunks that are runtime chunks will have chunk.hasRuntime() = true
+    if (chunk.hasRuntime()) return true;
+
+    return false;
   }
 
   /**