Module not found error when adding worker-loader

Question

I am working on my vue app and I am trying to add worker-loader. These are the stops I have followed. I added worker-loader using yarn.

yarn add worker-loader

main.js

import Worker from "worker-loader!./Worker.js";

environment.js

environment.loaders.append('worker-loader', {
  test: /\.worker\.js$/,
  use: [{ 
    loader: "worker-loader"
  }],
});

module.exports = environment;

The error I am getting is

Module not found: Error: Can't resolve './Worker.js' in '/Users/app/javascript/packs/home'

Please have me find where I am going wrong and help me setup worker-loader.

Answer 1

Try replacing

import Worker from "worker-loader!./Worker.js";

With this snippet from the docs

import Worker from "./file.worker.js";

const worker = new Worker();

worker.postMessage({ a: 1 });
worker.onmessage = function (event) {};

worker.addEventListener("message", function (event) {});

if that doesn't work I have had success by changing the previous line to

import Worker from 'worker-loader!./file.worker.js';

from this StackOverflow Answer