Fix Webpack bundling of recorder worklet (#21239)

* Fix Webpack bundling of recorder worklet

build-scripts/webpack.cjs

@@ -74,6 +74,9 @@ const createWebpackConfig = ({
           resolve: {
             fullySpecified: false,
           },
+          parser: {
+            worker: ["*context.audioWorklet.addModule()", "..."],
+          },
         },
         {
           test: /\.css$/,
@@ -92,11 +95,15 @@ const createWebpackConfig = ({
       moduleIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
       chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
       splitChunks: {
-        // Disable splitting for web workers with ESM output
+        // Disable splitting for web workers and worklets because imports of
-        // Imports of external chunks are broken
+        // external chunks are broken for:
-        chunks: latestBuild
+        // - ESM output: https://github.com/webpack/webpack/issues/17014
-          ? (chunk) => !chunk.canBeInitial() && !/^.+-worker$/.test(chunk.name)
+        // - Worklets use `importScripts`: https://github.com/webpack/webpack/issues/11543
-          : undefined,
+        chunks: (chunk) =>
+          !chunk.canBeInitial() &&
+          !new RegExp(`^.+-work${latestBuild ? "(?:let|er)" : "let"}$`).test(
+            chunk.name
+          ),
       },
     },
     plugins: [

src/util/audio-recorder.ts

@@ -70,17 +70,18 @@ export class AudioRecorder {
   }
 
   private async _createContext() {
-    // @ts-ignore-next-line
+    // @ts-expect-error webkitAudioContext is not recognized
-    this._context = new (window.AudioContext || window.webkitAudioContext)();
+    const context = new (AudioContext || webkitAudioContext)();
     this._stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-
+    // Syntax here must match an item of `parser.worker` in Webpack config in
-    await this._context.audioWorklet.addModule(
+    // order for module to be parsed and a chunk to be properly created.
-      new URL("./recorder.worklet.js", import.meta.url)
+    await context.audioWorklet.addModule(
+      /* webpackChunkName: "recorder-worklet" */
+      new URL("./recorder-worklet.js", import.meta.url)
     );
-
+    this._context = context;
     this._source = this._context.createMediaStreamSource(this._stream);
-    this._recorder = new AudioWorkletNode(this._context, "recorder.worklet");
+    this._recorder = new AudioWorkletNode(this._context, "recorder-worklet");
-
     this._recorder.port.onmessage = (e) => {
       if (!this._active) {
         return;

src/util/recorder-worklet.js

@@ -18,4 +18,4 @@ class RecorderProcessor extends AudioWorkletProcessor {
   }
 }
 
-registerProcessor("recorder.worklet", RecorderProcessor);
+registerProcessor("recorder-worklet", RecorderProcessor);