How do you use Web Workers with Webpack 5?

Question

I've been struggling to find the best way to use Web Workers while utilizing Webpack 5 and typescript. I try to follow the documentation, however, when I try to create a Web Worker, I am experiencing the following error:

Uncaught DOMException: Worker constructor: Failed to load worker script at "d:\Project\SeamCarving\js\dist0.bundle.js"

I am not sure why it is trying to access the file from my local system instead of through the development server like: http://localhost:8080/js/dist0.bundle.js.

Here's the code:

if (window.Worker) {
    let worker = new Worker(new URL("./image-worker", import.meta.url));

    worker.onmessage = function (message) {
      return receiveMessage(message);
    };

    worker.onerror = function (message) {
      console.log("ERROR: ", message.error);
      console.log(message.message, message.filename, message.lineno);
    };
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './js/main.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        include: path.resolve(__dirname, 'js')
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  devtool: 'source-map',
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, './'),
    publicPath: path.resolve(__dirname, '/js/dist/'),
  },
  output: {
    publicPath: path.resolve(__dirname, "js/dist/"),
    filename: "bundle.js",
    path: path.resolve(__dirname, 'js/dist'),
  }
}

All resources I have found so far are using worker-loader, but it's my understanding Webpack 5 makes this obsolete.

View the full project on GitHub.

give the worker-loader a try even on V 5 import Worker from "worker-loader!./$Path — Robert Rowntree, Mar 19 '21 at 15:15
@RobertRowntree Thank you for the suggestion but, I really want to avoid using loaders in this case since they aren't needed in Webpack 5 as written in the [official documentation](https://webpack.js.org/guides/web-workers). — Quinn Zipse, Mar 19 '21 at 18:39
@Quinn how do you got it working with ts_loader, because i cam getting an error new Worker(new URL('./worker.js', import.meta.url)); in this line while bundling and it says additional loader may be needed. i can make it work with webpack-loader and webpack 4. How can i move to webpack5 — last-Programmer, Apr 26 '21 at 17:18

score 2 · Accepted Answer · answered Mar 19 '21 at 18:36

I figured out my problem,

Incorrect output block:

output: {
    publicPath: path.resolve(__dirname, "js/dist/"),
    filename: "bundle.js",
    path: path.resolve(__dirname, 'js/dist'),
}

publicPath in this case is set to use an absolute path. So, when I tried running it through the server it would serve as a file:// instead of through http://. Since Chrome (and I believe most modern browsers) don't allow you to load local files as scripts for security reasons, it was blocking it.

Originally, I thought it may have been some sort of problem with using typescript, however, I learned it was just a misconfiguration causing the script to always use the absolute value.

Corrected output block:

output: {
    publicPath: "js/dist/",
    filename: "bundle.js",
    path: path.resolve(__dirname, 'js/dist'),
}

score 0 · Answer 2 · edited Apr 14 '23 at 08:01

I am facing the issue after I upgraded my project from angular 12 to angular 13(including webpack upgradation from webpack 4 to webpack 5).

//Before upgrade

import * as testworker from 'worker-loader!./test.worker.bundle.js';

// After upgrade to webpack 5

const testworker = new Worker(new URL("test.worker.bundle.js", import.meta.url));

I had to change as mentioned above after upgrade to webpack 5 to make ng build successful. But when we run command of ng serve getting runtime error with '*DOMException: Failed to construct 'Worker': Script at 'file::/// Path to js file' 'http://localhost: test.worker.bundle.js' cannot be accessed from origin 'http://localhost:4200'.

I tried adjusting output block in config file as well. None of them is solving the issue.

Let me know if anywhere else has to be changed.

How do you use Web Workers with Webpack 5?

2 Answers2

Linked