`@shopify/web-worker` does not support `chunkFilename` being a function

[swissspidy]

Overview

In webpack, output.chunkFilename can be either a string or a function returning a string.

However, the webpack loader in @shopify/web-worker assumes it is only a string:

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

Lines 94 to 96 in 34ac07a

	chunkFilename: addWorkerSubExtension(
	compiler.options.output.chunkFilename as string,
	),

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

Lines 151 to 155 in 34ac07a

	function addWorkerSubExtension(file: string) {
	return file.includes('[name]')
	? file.replace(/\.([a-z]+)$/i, '.worker.$1')
	: file.replace(/\.([a-z]+)$/i, '.[name].worker.$1');
	}

This leads to TypeError: file.includes is not a function errors when using something like

output: {
	chunkFilename: (pathData) => {
			console.log(pathData.chunk.name);
			return '[name].js';
		},
}

To fix this, first check whether it's a function, and then maybe add a wrapper function that adds the suffix.

Consuming repo

What repo were you working in when this issue occurred?

https://github.com/swissspidy/media-experiments

Area

• Add any relevant Area: <area> labels to this issue

Scope

• Is this issue related to a specific package?

  • Tag it with the Package: <package_name> label.

---

Checklist

• Please delete the labels section before submitting your issue
• I have described this issue in a way that is actionable (if possible)