TypeError: Worker is not a function

[GlenHughes]

I'm trying to implement comlink into a project. I'm currently getting a TypeError: Worker is not a function error thrown in the console but the code compiles fine without any warnings or errors.

"comlink": "^4.3.0"
"comlink-loader": "^2.0.0"

How I'm using comlink-loader:

import MyWorker from "comlink-loader!./assets/worker.js"

const worker = new MyWorker()

I also want to inline the workers so they are included within the webpack generated bundle. Is this possible?

[willmorgan]

Have you tried defining Worker as a browser global if using Webpack?

[GarrisonD]

@GlenHughes I had the same issue. Do you have worker-loader of version 3.0 or higher in package-lock.json? I had and after removing worker-loader & reinstalling (it's important to uninstall and install again!!!)comlink-loader this issue disappeared.

[outlawpractice]

I am getting the same error from code that worked fine until I upgraded react-scripts to 4.0, which introduced Webpack 4.0. Here is my code:

/workers/storage.worker.js:

import util from '../lib/util';
import localforage from 'localforage';
import lz4 from 'lz4js';

export async function updateStorage(firmId, userId, name, data) {
    // Stuff
}

export async function restore(firmId, userId, entityName, entityPluralName, fetchSuccess, fetchFailure) {
    // Stuff
}

/index.js:

...

import StorageWorker from 'comlink-loader!./workers/storage.worker';

...

try {
    window.storageWorker = new StorageWorker();
}
catch(err) {
    console.warn('Comlink failed', err.message);
}

And the error message happens every time, in every browser, in development and production mode. Again, this worked fine before the upgrade to react-scripts 4.0.0.

[outlawpractice]

Update: downgrading worker-loader to 2.0.0 fixed the issue. When I upgraded react-scripts, I apparently also upgraded the worker-loader package.

I created a new project with create-react-app, added a simple test worker and added a line to load it in index.js and it failed with the error referenced above (Worker is not a function). So apparently worker-loader 3.x does not work with comlink-loader with newer React apps made with create-react-app.

Replication steps:

1. Install the latest create-create-app package:
   npm i -g create-react-app@latest

2. Create a new PWA app with create-react-app:
   npx create-react-app --template cra-template-pwa test-comlink

3. In test-comlink directory, install comlink-loader and comlink packages:
   npm i -s comlink-loader worker-loader

4. Create a worker, e.g.

testworker.js: 

export async function test(s) {
    return s.trim();
}

5. Import into index.js:

import TestWorker from 'comlink-loader!./testworker'; // eslint-disable-line

const testWorker = new TestWorker();

6. Run
   npm start

7. Boom!

[GarrisonD]

I would not suggest you install worker-loader manually. Just install comlink-loader and the suitable version of worker-loader will get installed automatically.

[outlawpractice]

My program uses react-pdf, which requires worker-loader ^3.0.0. So if I do not specifically install worker-loader ^2.0.0 in my package.json, it uses worker-loader 3.0.5 and fails immediately. I imagine there are a number of other programs that require the 3.0 branch. Would it not make sense to make comlink-loader work with the latest stable branch?

[GarrisonD]

@outlawpractice that would be cool to upgrade the worker loader to the latest version. I am not sure if I can do it. Will see.

[gui-killer]

@GlenHughes I had the same issue. Do you have worker-loader of version 3.0 or higher in package-lock.json? I had and after removing worker-loader & reinstalling (it's important to uninstall and install again!!!)comlink-loader this issue disappeared.

+1, the same