💡 Adding a custom webworker with Vite + TypeScript

[RolandoAndrade]

Hey guys. I'm just writing because maybe somebody had a problem integrating webworkers with Vite and Typescript. So here I will write a short post indicating what I did to make it work,

Create a webworker

import * as worker from 'monaco-editor/esm/vs/editor/editor.worker';
import { YourWorker } from '<yourworkerpath>';

self.onmessage = () => {
  worker.initialize((ctx) => new YourWorker(ctx));
}

On App.tsx I added the getWorker method.

import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';

self.MonacoEnvironment = {
  getWorker: async function (_workerId, label) {
    console.log(`getWorker: ${label} ${_workerId}`);
    switch (label) {
      case <your language id>:
        return new Worker(new URL('<yourworkerpath>', import.meta.url), {
          type: 'module',
        });
      default:
        return new editorWorker();
    }
  }
}

When I did this a new webworker was added, but when I was trying to access to it using createWebworker it was not found. It was fixed after adding this to the vite.config.ts.

export default defineConfig({
...
  optimizeDeps: {
    include: [
      '<webworker path>',
    ]
  }
...
})

After adding that. I was able to instantiate correctly the worker

const worker = editor.createWebWorker<YourWorker>({
  // module that exports the create() method and returns a `JSONWorker` instance
  moduleId: '<your worker path>', // src/stepcode.worker in my case
  label: <your language id that you used on `getWorker`>,
  // passed in to the create() method
  createData: {
    languageId: <your language id>
  }
});

I hope my comment could help you. Happy coding!

[Lemour-sudo]

Great solution!

Can you explain what your YourWorker looks like?