Import a module in web worker in reactjs

Question

i have the following code in worker.js and i am trying to import KMeans inside of it, and i export the worker as shown.

import KMeans from "tf-kmeans";

const splitText = () => {
  ...
    const kmeans = new KMeans({});
  ...
  };
};

let code = splitText.toString();
code = code.substring(code.indexOf("{") + 1, code.lastIndexOf("}"));

const blob = new Blob([code], { type: "application/javascript" });
const worker_script = URL.createObjectURL(blob);

export default worker_script;

In the main component where i want to call the worker, i call it using the following:

let worker = new Worker(new URL(worker_script, import.meta.url), {
      type: "module",
    });

but when i use the worker i get the following error:

Uncaught ReferenceError: tf_kmeans__WEBPACK_IMPORTED_MODULE_1___default is not defined

How can this be solved? TIA

marwan mostafa · Accepted Answer · 2022-07-25 16:24:42Z

2

I figured it out using worker-loader. Implement your worker.js as the following:

import KMeans from "tf-kmeans";

onmessage = function (event) {
  // worker body
  //self.postMessage(resultToReturn);
};

then in your main component

import the Worker using worker loader using the following: import Worker from "worker-loader!./kmeans.worker.js";. you may add // eslint-disable-next-line import/no-webpack-loader-syntax to avoid linting problems.
instantiate the worker: var worker = new Worker();
To send anything to the worker use: worker.postMessage({key:value});
To get anything from the worker use: worker.onmessage = (ev) => {};

answered Jul 25, 2022 at 16:24

marwan mostafa

311 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Import a module in web worker in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related