Background service worker : document is not defined

[lionelhorn]

Describe the bug

In background context : If imported code from third party librariries are using document, the background script may fail to start or load with Uncaught ReferenceError: document is not defined error.

To Reproduce

https://github.com/lionelhorn/wxt-wasm-vlcn-repro

Steps to reproduce the bug using the reproduction:

1. Install dependencies: pnpm i
2. Start dev mode: pnpm dev
3. Open chrome://extensions/
4. Reload wxt-wasm-vlcn-repro extension
5. Open errors

Expected behavior

Background script / service worker to start without errors.

Screenshots

Environment

  System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 AMD Ryzen 9 7950X 16-Core Processor
    Memory: 33.11 GB / 63.15 GB
  Binaries:
    Node: 18.18.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.14.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.83)

[lionelhorn]

Tried to add document in define in wxt.config.ts but it doesn't seem to help.

https://github.com/lionelhorn/wxt-wasm-vlcn-repro/blob/0965998a3f8f673240b0ff0fb87af5fba79ed5ba/wxt.config.ts#L34

[lionelhorn]

The function initWasm im calling in background.ts needs a module built using emscripten

https://github.com/vlcn-io/js/blob/b1574592f87067c8d6ddc269d9ad26018cfde05b/packages/crsqlite-wasm/src/index.ts#L1

And apparently emscripten has these document ..
emscripten-core/emscripten#7222

So I don't have much control over this.

[lionelhorn]

Same code works in plasmo
https://github.com/lionelhorn/plasmo-vlcn-wasm-demo

[aklinker1]

Thanks for the report, I'm adding ESM support to the background (#398), so it should be working after that is in.

I'll make sure to re-test this issue once that is merged.

[lionelhorn]

Thanks for the update. Will look into it.
Added a question here #398 (comment). Not sure if you get the mention notifications.

[aklinker1]

Fix released in v0.16.2. Here's a working background.ts after upgrading:

import initWasm from "@vlcn.io/crsqlite-wasm";
import wasmUrl from "@vlcn.io/crsqlite-wasm/crsqlite.wasm?url";

export default defineBackground({
  main() {
    initSqlite();
  },
});

async function initSqlite() {
  const sqlite = await initWasm(() => wasmUrl);

  const db = await sqlite.open("database.db");
  await db.exec(
    "CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY NOT NULL, name TEXT)"
  );

  const stmt = await db.prepare(
    "INSERT OR IGNORE INTO users (name) VALUES (?)"
  );
  await stmt.run(db, `John Do. Born at ${new Date().toTimeString()}`);

  const users = await db.execA<[bigint, string]>("SELECT * FROM users");
  console.log("Saved users", users);
}

Here's the full code based on your reproduction: working-wasm-example.zip