What's the webpack 5 story for web workers written in typescript?

[azangru]

Hi,

The documentation for webpack 5 says that webpack no longer needs worker-loader to load web worker files.

This is reinforced by the README on the worker-loader page, which warns that worker-loader is only intended for use with webpack 4 and is not supposed to be used with webpack 5.

However, the example of worker usage in the webpack docs is very simple — it assumes that developers author their worker files in javascript. How should one configure webpack to be able to load workers authored in typescript?

[alexander-akait]

https://www.typescriptlang.org/play?#code/HYUw7gBA6g9gTgaxHAFKSBVASgGRQcgDoB6MeJOQgKwGd8AaCASwFsAHeAF0JZE4ENCAVzgAbAJTiA3EA, what is the problem?

[vankop]

yeah, this creates an asset, to achieve what you want you need to use multicompiler mode, example webpack.config:

module.exports = [
  {
     name: "webworker",
     target: "webworker",
     entry: "./worker.ts",
     output: { filename: "worker.js" }
  },
  {
     name: "app",
     dependencies: ["worker"]
  }
];

and then use in new URL(...) output of the first compilation

[kpratik2015]

Ah, okay. I was hoping for a way without modifying webpack config. Thanks!

[subhamX]

This is such a nice discussion. Thank you folks, finally I was able to properly configure web worker using typescript + webpack5 with async/await. 🙂

[mulgurul]

Ok @subhamX but how did you manage it. Please share an example:-)
Thanks

[subhamX]

@mulgurul; Just saw this man. I completely forgot what I did. It was during my time at mercari (proprietary code, and I don't have access to it anymore).

But maybe, I used this multicompiler thing to compile the worker first, and then the app.

And while using the worker in app, I initialized it globally, instead of using useRef or createRef (for some reason, the singleton pattern using these hooks didn't work for me).

[jmcdl]

Hi all, I've been going back and forth over this thread for an hour but haven't found a solution to my very similar problem here:

I'm creating the worker as so:

The webpack terminal output shows the worker file created as src_workers_project_worker_ts.19dc6e0a66c2986d1a57.js:

However the browser console shows that the app is trying to load a worker file with an undefined contentHash:

Is anyone able to suggest how I might resolve this?

Thanks

[alexander-akait]

Fix here #14112

[jmcdl]

Thank you! I'll keep an eye out for the release.

[nxtexe]

Hey guys there seems to be an issue in my situation. So I have a project which I bundle for use in a React project. When I try to use new Worker(new URL('./reader.worker.ts', import.meta.url)); it compiles and outputs a separate file called src_reader_worker_ts.js that seems like a duplicate of the main file but when I use the separated syntax:

const workerURL = new URL('./reader.worker.ts', import.meta.url);
const worker = new Worker(workerURL);

It compiles fine with just the compiled js contents of the typescript worker file. However neither work and they both cause an Uncaught SyntaxError: Unexpected token '<' (at reader.worker.js:1:1)
Because the import is wrong somehow and the React app returns HTML instead.

Both React App and project use webpack 5. The project webpack config:

module.exports = {
    mode: 'development',
    entry: {
        index: path.resolve(__dirname, 'src', 'index.ts'),
    },
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: 'ts-loader',
                exclude: [
                    /node_modules/,
                    /examples/
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '...']
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        libraryTarget: 'commonjs',
        globalObject: 'this',
        umdNamedDefine: true,
        assetModuleFilename: (pathData) => {
            const { filename } = pathData;

            if (filename.endsWith('.ts')) {
                return '[name].js';
            } else {
                return '[name][ext]';
            }
        },
        clean: true
    },
    devtool: 'source-map'
};

[vankop]

Uncaught SyntaxError: Unexpected token '<' (at reader.worker.js:1:1)

this means you setup your webserver wrong way ( or there is no reader.worker.js and server fallbacks to 404 or index html )

So I have a project which I bundle for use in a React project. When I try to use new Worker(new URL('./reader.worker.ts', import.meta.url)); it compiles and outputs a separate file called src_reader_worker_ts.js that seems like a duplicate of the main file

that is correct behaviour, maybe your webworker code is wrong..

[nxtexe]

I didn't configure the webserver. It's the default that comes with create-react-app and invoked with npm start. The webworker is apart of a npm package so when I import modules from the package it all works fine but the worker import just doesn't work.

[mulgurul]

I read here: https://webpack.js.org/guides/web-workers/ that you should not declare URL as variable. Do the definition inside of the Worker constructor call ie: new Worker(new URL('./reader.worker.ts', import.meta.url)):

[Aloento]

I think HMR will conflict with this.
In top of my generated file for worker.ts:
__webpack_require__.$Refresh$.runtime = require('path/node_modules/react-refresh/runtime.js');

then I will get
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Promise') from react-refresh

But in fact Promise can be used in web worker with modern browsers and I have tested that the async can use in my browser.
So I don't know why it said undefined.

[mulgurul]

I have spent more tha a day trying to make this work with electron, typescript, commonjs (no import.meta.url) and webpack 5 way. Been through so many hacks suggested by copilot and my own humble intelligence:-), but none really worked!
It would be so great if someone with knowledge about how this should be setup could bring the light in. Eventually. the Webpack documentation could be improved with some nice examples for further help.
Today I'm going to try if the worker-loader from v4 days and see if it still works.

[alexander-akait]

@mulgurul Just provide reproducible example and I will show you, then we can improve our docs

[mulgurul]

Great you will help Alexander..
Yes, heres a clean example, our app is based on the ElectronReactBoilerplate from github. Heres a clone with webworker added with different approaches inside app.tsx.
https://github.com/mulgurul/ErbWithWebWorker

Nb when the error is something with "<" it is probably because fetching the script falls through to index.html as default, and it starts with <!DOCTYPE html>

Thanks so much for looking into it. I'm quite frustrated by loosing many hours of work....

Best regards from Peter

[mulgurul]

@alexander-akait are you maybe able to take a look at this and see if theres a way to solve it? Thanks.

[alexander-akait]

You can use:

const worker = new Worker(
  // @ts-ignore
  new URL('./webworker.worker.ts', import.meta.url),
);

webpack will make it works after bundling, but yeah, ts doesn't allow to use import.meta.url with "module": "commonjs",, as alternative you cna use multi compiler mode and use target: "webworker" to bundle worker code before the whole application