0

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: enter image description here

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.

See the log of the browser for the original URL

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?

Mxngls
  • 437
  • 1
  • 5
  • 16
  • Look at the HTTP Status code which is not shown in your question. Either you have a file not found, a CORS error, or a similar problem preventing the download of the actual Wasm file. – John Hanley Jul 04 '22 at 02:11
  • It basically tries to redirect to a page that not exists. So it's a 404. I do not understand why though. – Mxngls Jul 04 '22 at 02:12
  • Edit your question and show the URI of the original request and the redirect. I noticed you are using **..** in the URI. Specify the full path and not relative paths. – John Hanley Jul 04 '22 at 02:20
  • @JohnHanley please see my update above. – Mxngls Jul 05 '22 at 08:43
  • Some server implementations require having the MIME types set up to serve certain types of files and return the content-type `application/wasm`. For example, Apache requires changes to serve Wasm files. I wrote an article for Apache which might help you see if your server requires similar changes: https://www.jhanley.com/pyscript-apache-web-server-setup/ – John Hanley Jul 05 '22 at 18:23
  • When copied manually into the output directory of Next.js the file gets served correctly. The main problem seems to be that Next.js is not putting the ```.wasm``` file into the output directory but only its worker ```worker.sql-wasm.js```. – Mxngls Jul 06 '22 at 05:36

0 Answers0