CODEWITHSUNDEEP
javascriptweb-worker
Miha Šušteršič
Miha Šušteršič

Reputation: 10052

web worker onmessage - Uncaught SyntaxError: Unexpected token <

Following this example I wrote the following function:

var rasterToVectorWorker = new Worker(
  "../../../services/canvas/rasterToVectorWorker.js"
);

rasterToVectorWorker.postMessage("message");

rasterToVectorWorker.onmessage = e => {
  console.log("this is the return from the worker: ", e);
};

rasterToVectorWorker.js:

onmessage = function(e) {
  console.log("Message received from main script");
  var workerResult = "Result: " + e;
  console.log("Posting message back to main script");
  postMessage(workerResult);
};

But I am getting the following error message:

rasterToVectorWorker.js:1 Uncaught SyntaxError: Unexpected token <

Using window.onmessage did not solve the problem as well.

EDIT: I am using create-react-app without ejecting and adding webpack loaders

What am I doing wrong?

Upvotes: 7

Views: 16263

Answers (5)

KISHORE K J
KISHORE K J

Reputation: 615

This happens if you have the wrong path to the worker file, check if you have made any mistake is path.

const worker = new Worker(new URL('../wrong-path/misspelled-file-name.js', import.meta.url))

Try placing the worker file in the same directory and load it once with "./worker.js" to make sure its not the path error.

const worker = new Worker(new URL('./worker-file.js', import.meta.url))

Upvotes: 2

耿开辉
耿开辉

Reputation: 41

You can use the following methods.

No matter where the files are placed.

const myWorker = new Worker(new URL('./my-worker.js', import.meta.url))

Upvotes: 4

Alessio Koci
Alessio Koci

Reputation: 1113

A solution to use web workers with create-react-app without using worker-loader is https://github.com/alewin/useWorker.

Example:

import React from "react";
import { useWorker } from "@koale/useworker";

const rasterToVector = () => {
  ...
}

const Example = () => {
  const [rasterToVectorWorker] = useWorker(rasterToVector);

  const run = async () => {
    const result = await rasterToVectorWorker(); 
    console.log("End.");
  };

  return (
    <button type="button" onClick={run}>
      Run rasterToVectorWorker
    </button>
  );
};

Upvotes: 1

Washington Braga
Washington Braga

Reputation: 1813

I guess you can try one of those options:

The first one is to put your rasterToVectorWorker inside public folder, then your WebWorker may be loaded properly.

const rasterToVectorWorker = new Worker('rasterToVectorWorker.js');

The another option is to load your WebWorker "dynamically":


import rasterToVectorWorker from '../../../services/canvas/rasterToVectorWorker.js'

function loadWebWorker(worker) {
    const code = worker.toString();
    const blob = new Blob(['('+code+')()']);
    return new Worker(URL.createObjectURL(blob));
}

const rasterToVectorWorker = loadWebWorker(rasterToVectorWorker);

rasterToVectorWorker.postMessage("message");

Upvotes: 7

zeros and ones
zeros and ones

Reputation: 61

I also had the same problem with a React project when I was trying to load the web worker file and pass it to my new worker.

While I have not used the fix in create-react-app, the solution should be similar.

I found I needed to use the web worker loader, which can be found here: https://www.npmjs.com/package/worker-loader

I then updated my webpack config to inline the worker like so:

{
  test: /\.worker\.js$/,
  use: {
    loader: 'worker-loader',
    options: {
      inline: true
    }
  }
},

This then let me use my web worker.

Upvotes: 4

Related Questions