Import in worker leads to HTMLElement not define

[akitaSummer]

Describe the bug
I used xc-app to create my project.And comlink is installed.But when I run the wasm code in worker, client will report an error.

hello.worker.ts

import { expose } from "comlink";
import init, { greet as _greet } from "test-wasm";

let wasm: any;

const getWasmFunc = async (funcName: string) => {
  if (!wasm) {
    await init();
    wasm = {
      greet: _greet,
    };
  }
  return wasm[funcName];
};

export const hello = async () => {
  const greet = await getWasmFunc("greet");
  return greet();
};

expose(hello);

app.tsx

import React, { useEffect, useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import init, { greet } from "test-wasm";
import type { hello } from "./hello.worker";
import HelloWorker from "./hello.worker?worker";
import { wrap } from "comlink";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    init().then(async (wasm) => {
      const wasmHello = wrap<typeof hello>(new HelloWorker());
      console.log(await wasmHello());
      console.log(await wasmHello());
    });
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello WebAssembly!</p>
        <p>Vite + Rust + React</p>
        <p>
          <button onClick={() => greet()}>hello wasm</button>{" "}
          <button type="button" onClick={() => setCount((count) => count + 1)}>
            count is: {count}
          </button>
        </p>
        <p>
          Edit <code>App.tsx</code> and save to test HMR updates.
        </p>
        <p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
          {" | "}
          <a
            className="App-link"
            href="https://vitejs.dev/guide/features.html"
            target="_blank"
            rel="noopener noreferrer"
          >
            Vite Docs
          </a>
          {" | "}
          <a
            className="App-link"
            href="https://github.com/lencx/vite-plugin-rsw"
            target="_blank"
            rel="noopener noreferrer"
          >
            Rsw Docs
          </a>
        </p>
      </header>
    </div>
  );
}

export default App;

client error:
Uncaught ReferenceError: HTMLElement is not defined at overlay.ts:118

more:
If you clone test-wasm/pkg to my-app/src/pkg, there will be no error.

hello.worker.ts

import { expose } from "comlink";
import init, { greet as _greet } from "./pkg";

let wasm: any;

const getWasmFunc = async (funcName: string) => {
  if (!wasm) {
    await init();
    wasm = {
      greet: _greet,
    };
  }
  return wasm[funcName];
};

export const hello = async () => {
  const greet = await getWasmFunc("greet");
  return greet();
};

expose(hello);

I think vitejs/vite#3381 and vitejs/vite#5396 will help you

[gotjoshua]

in the mean time, we can add this and use dynamic imports (below it)

// hack to avoid overlay.ts's dom assumptions
self.HTMLElement = function () {
return {}
}
self.customElements = {
get () {
return []
},
}

...

const { todoDB } = await import('./dexie')

[Sparkenstein]

Hey I see this issue is still open, I am facing the same problem

Where exactly do we have to add the given snippet?
anyone found any other solution for this?

[gotjoshua]

Where exactly

i added it at the top of my Worker.js file.

Under the imports and above the self.onmessage:

import { ... } from './WebWorkerImports/Utils'

// hack to avoid overlay.ts's dom assumptions
self.HTMLElement = function () {
  return {}
}
self.customElements = {
  get () {
    return []
  },
}

self.onmessage = async (e) => {

[RolkerMan]

here is a fix in vite, checkout the issue it refered in the commit page:
vitejs/vite@a52b45e