importScripts in Web Workers is undefined inside a React/Webpack environment

Question

I am working on a React app created with create-react-app. I was having trouble creating a web worker in it so I posted a question here on SO: Creating a web worker inside React

I've found a solution, as written in the post above, to load a worker without ejecting the app and messing with the Webpack config. This is the code, from the post above:

// worker.js
const workercode = () => {

    self.onmessage = function(e) {
        console.log('Message received from main script');
        const workerResult = 'Received from main: ' + (e.data);
        console.log('Posting message back to main script');
        self.postMessage(workerResult);
    }
};

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

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

module.exports = worker_script;

and in the file that uses the worker:

import worker_script from './worker';
const myWorker = new Worker(worker_script);

myWorker.onmessage = (m) => {
    console.log("msg from worker: ", m.data);
};
myWorker.postMessage('im from main');

It works, however, I cannot seem to get importScripts to work. Even if I do this (outside onmessage or inside onmessage):

if (typeof importScripts === 'function') {
    importScripts('myscript.js');
}

In that case, the if statement turns out to be true, but then fails on the actual import with the same error message 'importScripts' is not defined as if the if statement is a false positive, which doesn't sound right. I'd say this is a context issue and that the worker probably isn't loading properly (although it seems to work), but it's just a guess.

Any ideas what's happening here?

Answer 1

importScripts in a worker created from Blob works fine, at least in 2021 (react 17.0.2, react-scripts 4.0.3, Chrome 92). The imported script URL must be absolute because worker was created from Blob.

The original issue might have been a bug in webpack or the transpilation might have changed the code in a weird way.

const workercode = () => {
    importScripts("https://example.com/extra.js");
    console.log(self.extraValue); // 10

    self.onmessage = function(e) {
        console.log('Message received from main script');
        ...
    }
};

 

// extra.js
self.extraValue = 10;

Answer 2

Looks like this is still broken in 2022 - Seems there is a regression coming down the dev pipeline (at least in Android WebView and possibly some dev/canary chrome verions.)

https://bugs.chromium.org/p/chromium/issues/detail?id=1078821