How to bundle / specify wasm URL?

[phiresky]

Using webpack, it tries to load the WASM from a file:/// url and the wasm file is not bundled as an asset. Is it possible to specify the wasm URL or make it work with webpack in some other way?

[phiresky]

it would work correctly if you get the URL by doing

const url = new URL('./foobar.wasm', import.meta.url).toString()

[rhashimoto]

I've never used Webpack and have no idea how it works. You can specify the WASM URL by passing an argument to the module factory, e.g.:

import SQLiteESMFactory from '../dist/wa-sqlite.mjs';
...
const module = await SQLiteESMFactory({
  locateFile(file) {
    return `https://rhashimoto.github.io/wa-sqlite/dist/${file}`;
  }
});

...but I don't know whether Webpack would pick that up.

Because I don't know Webpack, I don't understand your second comment - is that something you're suggesting as a user workaround, or for me to put in the package somewhere?

Is the Emscripten ES6 modularization part of the problem? Building a CommonJS module is just a matter of changing .mjs to .js in the Makefile. I can build both if that's easier to use with Webpack.

Sorry, but Webpack is not even a black box to me; I don't even know what the box looks like! 😀

[phiresky]

Is the Emscripten ES6 modularization part of the problem?

No, webpack works fine with ES6.

I don't understand your second comment - is that something you're suggesting as a user workaround, or for me to put in the package somewhere?

If you use that code snippet within the library to get the wasm file path, then webpack will realize the wasm file is an asset that needs to be written to the output folder. But looking at the code, I see that the wa-sqlite.mjs code is completely generated by emscripten so I guess you don't actually have control over that, it needs to be "fixed" on their side.

Your locateFile solution works though, thanks. You should maybe add the info to the readme since I'd guess most people use a bundler / webpack.