How can I use an ES6 module in a worker?

[rhashimoto]

The wa-sqlite build produces ES6 modules, which is nice for development. But most applications should put time-consuming operations in a Worker, and support for ES6 modules in a Worker isn't universal yet. Worker code generally needs to be bundled.

Emscripten modules need to load their associated .wasm file, and the generated code for ES6 uses import.meta.url as its default location. import.meta.url is not valid outside an ES6 module, however, so the bundler has to translate this to something else. When the target context is a Worker, that something else needs to be valid in a Worker, so something like document.currentScript.src, which is the substitution my bundler chooses, causes a runtime exception.

The fix I use is to configure a bundler string replacement plug-in (@rollup/plugin-replace in my case) to replace import.meta.url with an empty string. There may be better approaches out there but this is sufficient for me so far.

[jimmywarting]

To create a Web Worker and being able to use ESM add a 2nd argument with { type: 'module' }

new Worker(url, { type: 'module '})

[rhashimoto]

You can load an ES module directly in a Worker if browser compatibility is not an issue for you, but the point of this FAQ item is that currently bundling is required to work across all WASM-capable browsers (i.e. including Firefox) and this shows a workaround for a bundling problem.

[AntonOfTheWoods]

If anyone comes here trying to put wa-sqlite in a service worker (which as of this posting still has terrible support for modules...) and is using vite-plugin-pwa, then you can put something like this in your VitePWAOptions config:

import replace from "@rollup/plugin-replace";
...
  injectManifest: {
    ...
    // @ts-ignore - this is a valid option somehow... and is required for wa-sqlite to work
    plugins: [replace({ "import.meta.url": mode === "development" ? "import.meta.url" : "undefined" })],
  },

And at the very least, it seems to work for me. As mentioned above, an empty string probably also works.