Overview
web-worker doesn't work with typescript and nextjs. Suggested babel-loader only works with js files.
Nextjs uses webpack5 and bunch of own loaders.
Adding
module: {
rules: [
{
test: /\.js/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
plugins: [require.resolve('@shopify/web-worker/babel')],
},
},
],
},
],
},
is not enough.
I was able to make it work by modifying webpack config in next.config like this:
import {WebWorkerPlugin} from '@shopify/web-worker/webpack';
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config, { isServer, nextRuntime, dev }) => {
config.module.rules.map((r) => {
if (
r.issuerLayer === "app-pages-browser" &&
Array.isArray(r.use) &&
Array.isArray(r.resolve.mainFields)
) {
r.use.push({
loader: "babel-loader",
options: {
babelrc: false,
plugins: [import.meta.resolve("@shopify/web-worker/babel")],
},
});
}
return r;
});
config.plugins.push(
new WebWorkerPlugin({
globalObject: "self",
}),
);
return config;
},
};
export default nextConfig;
So the appropriate rule looks like this:
But this solution feels flakey.
Consuming repo
https://github.com/Shopify/quilt/tree/main/packages/web-worker
Scope
Checklist
Overview
web-worker doesn't work with typescript and nextjs. Suggested
babel-loaderonly works with js files.Nextjs uses webpack5 and bunch of own loaders.
Adding
is not enough.
I was able to make it work by modifying webpack config in
next.configlike this:So the appropriate rule looks like this:
But this solution feels flakey.
Consuming repo
https://github.com/Shopify/quilt/tree/main/packages/web-worker
Scope
Is this issue related to a specific package?
Checklist