Right now I try work with the sql.js library and implement a web-worker that creates a SqLite database in the browser. The library itself consists of .wasm files. Right now these files are in the public directory under a custom assets folder (i.e. sql-wasm.wasm and worker-sql-wasm.js (please see their documentation for more information).
In one of my pages (db.js) in the pages directory I currently try to implement the worker like this:
const createDb = () => {
const worker = new Worker(
new URL("public/assets/worker.sql-wasm.js", import.meta.url)
);
worker.onerror = (e) => console.log("Worker error: ", e);
};
When calling that function I receive following errors:
As the following error
worker.sql-wasm.js:2343 failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
indicates not a .wasm file, but a plain html file was served (As 3c 21 44 4f reconcile to <DOC (see this similar issue for reference).
The file itself got served under the following url http://localhost:3000/_next/static/chunks/sql-wasm.wasm.
As both the .wasm file itself and its corresponding .js file are in the public directory I would expect the correct files to be served.
(As this behaviour seems to be a bug I filed a isse here as well.
Update 04.07.22
Apparently the .wasm file does not get served correctly into the .next/static/chunks directory. When copying the file after running npm run dev the web-worker is invoked and working correctly. The 404 error thus stems from the fact that the requested path by the worker itself (worker.sql-wasm.js) http://localhost:3000/_next/static/chunks/sql-wasm.wasm is not existent and thus the server responds with a 404.
I played around with different web-pack configs, but as my knowledge at this front is rather superficial I only had limited (i.e. none at all) success.
What config here is necessary that the .wasm file is served correctly?