polisen
polisen

Reputation: 327

WebWorkers - Worker is not defined when calling new Worker()

I'm using next with typescript and trying to load a webworker.

For some reason - when I'm trying to initialize the webworker when I'm creating a hook - next tells me that Worker is not defined.

I'm using comlink but I suspect it's an issue with Next since comlink isn't in the mix at the point of error.

You can find the problematic line in below code snippet useWorker.hooks.ts in the function makeWorkerApiAndCleanup

Does anyone understand why this is happening?

const worker = new Worker(url);

useWorker.hooks.ts

import { wrap, releaseProxy } from "comlink";
import { useEffect, useState, useMemo } from "react";

function makeWorkerApiAndCleanup() {
  const url = new URL("./useWorker.worker", import.meta.url)
  const worker = new Worker(url);
  const workerApi = wrap<import("./useWorker.worker").WorkerType>(worker);

  const cleanup = () => {
    workerApi[releaseProxy]();
    worker.terminate();
  };

  const workerApiAndCleanup = { workerApi, cleanup };

  return workerApiAndCleanup;
}

function useWorker() {
  const workerApiAndCleanup = useMemo(() => makeWorkerApiAndCleanup(), []);

  useEffect(() => {
    const { cleanup } = workerApiAndCleanup;
    return () => {
      cleanup();
    };
  }, [workerApiAndCleanup]);

  return workerApiAndCleanup;
}

function useImplementation() {
  const [data, setData] = useState({});

  const { workerApi } = useWorker();

  useEffect(() => {
    workerApi.workerFunction();
    setData({});
  }, [workerApi]);

  return data;
}

export default useImplementation;

useWorker.worker.ts

import { expose } from 'comlink';
import { workerFunction } from './functions';

const worker = {
  workerFunction,
};

export type WorkerType = typeof worker;

expose(worker);

useWorker/index.ts

import useWorker from './useWorker.hooks';

export { useWorker };

Upvotes: 3

Views: 1267

Answers (0)

Related Questions