fix:loader-module-webpack

.changeset/spicy-panthers-prove.md

@@ -0,0 +1,6 @@
+---
+'@shopify/web-worker': minor
+---
+
+- Allow `output.chunkFilename` to be a function or string.
+- `compiler.options.output.filename` and `compiler.options.output.chunkFilename` now default to `[name].js` when undefined.

packages/web-worker/src/webpack-parts/loader.ts

@@ -1,6 +1,13 @@
 import * as path from 'path';
 
-import type {LoaderContext, Compilation, Compiler, Chunk} from 'webpack';
+import type {
+  LoaderContext,
+  Compilation,
+  Compiler,
+  Chunk,
+  PathData,
+  AssetInfo,
+} from 'webpack';
 import {EntryPlugin, webworker, web} from 'webpack';
 
 import {WebWorkerPlugin} from './plugin';
@@ -71,9 +78,12 @@ export function pitch(this: LoaderContext<Options>, request: string) {
       wrapperContent = cachedContent;
     } else if (cachedContent == null) {
       try {
-        // @ts-expect-error readFileSync is available here
-        wrapperContent = this.fs.readFileSync(wrapperModule).toString();
-        moduleWrapperCache.set(wrapperModule, wrapperContent ?? false);
+        if (this.fs?.readFileSync) {
+          wrapperContent = this.fs.readFileSync(wrapperModule).toString();
+          moduleWrapperCache.set(wrapperModule, wrapperContent ?? false);
+        } else {
+          throw new Error('readFileSync is undefined');
+        }
       } catch (error) {
         moduleWrapperCache.set(wrapperModule, false);
       }
@@ -90,9 +100,9 @@ export function pitch(this: LoaderContext<Options>, request: string) {
   const workerOptions = {
     filename:
       plugin.options.filename ??
-      addWorkerSubExtension(compiler.options.output.filename as string),
+      addWorkerSubExtension(compiler.options.output.filename ?? '[name].js'),
     chunkFilename: addWorkerSubExtension(
-      compiler.options.output.chunkFilename as string,
+      compiler.options.output.chunkFilename ?? '[name].js',
     ),
     globalObject: (plugin && plugin.options.globalObject) || 'self',
   };
@@ -148,10 +158,21 @@ export function pitch(this: LoaderContext<Options>, request: string) {
   );
 }
 
-function addWorkerSubExtension(file: string) {
-  return file.includes('[name]')
-    ? file.replace(/\.([a-z]+)$/i, '.worker.$1')
-    : file.replace(/\.([a-z]+)$/i, '.[name].worker.$1');
+function addWorkerSubExtension(
+  file: string | ((pathData: PathData, assetInfo?: AssetInfo) => string),
+): string | ((pathData: PathData) => string) {
+  if (typeof file === 'function') {
+    return (pathData: PathData) => {
+      const result = file(pathData);
+      return result.includes('[name]')
+        ? result.replace(/\.([a-z]+)$/i, '.worker.$1')
+        : result.replace(/\.([a-z]+)$/i, '.[name].worker.$1');
+    };
+  } else {
+    return file.includes('[name]')
+      ? file.replace(/\.([a-z]+)$/i, '.worker.$1')
+      : file.replace(/\.([a-z]+)$/i, '.[name].worker.$1');
+  }
 }
 
 const loader = {