CODEWITHSUNDEEP
reactjsweb-workervitecomlink
Beginners Luck
Beginners Luck

Reputation: 11

Web workers HTMLElement not defined

I am using Web Workers in React with Comlink and Vite.

It's my first time using web workers.

I am trying to get the web worker just to add two numbers together. When clicking the button, I am getting this error. If anyone has a work around or fix for this it will be greatly appreciated.

overlay.ts:118 Uncaught ReferenceError: HTMLElement is not defined at overlay.ts:118:35 (anonymous) @ overlay.ts:118

vite.config.js

export default defineConfig({
      ...rest
      worker: {
        plugins: [react()],
      },
})

utils.tsx

export const addNumbers = (a, b) => {
  return a + b
}

main.tsx

          <button
            onClick={async () => {
              const worker = new Worker(new URL('./worker.ts', import.meta.url), {
                type: 'module',
              })

              const instance = wrap<import('./worker').RunAddNumbers>(worker)
              await instance.addNumbers(a, b)
            }}
          >
            Download
          </button>

worker.ts

import { expose } from 'comlink'

import { addNumbers } from './utils'

const worker = {
  addNumbers,
}

export type RunAddNumbers = typeof worker

expose(worker)

Upvotes: 1

Views: 950

Answers (0)

Related Questions