Integrating sql.js with SvelteKit

[chrisvire]

I am creating a PWA that is reading a static database. I am including the wasm file in the bundle.

In SvelteKit, the src/routes/route_name/+page.ts is where data is loaded for the route.

I have:

import { base } from '$app/paths';
import initSqlJs from 'sql.js';

export async function load({ fetch }) {
    const SQL = await initSqlJs({
        locateFile: (file: string) => `${base}/wasm/${file}`
    });

...

}

When I run this, I get this error with SvelteKit in the console:

Loading /wasm/sql-wasm.wasm using window.fetch. For best results, use the fetch that is passed to your load function: https://svelte.dev/docs/kit/load#making-fetch-requests

How can I have initSqlJs use a provided fetch function to request the file instead of window.fetch ?

[lovasoa]

Does using the native fetch cause any issue?

[chrisvire]

There are details at https://svelte.dev/docs/kit/load#Making-fetch-requests. Is there a way (or could there be a way) to pass the function to use for fetch in the initSqlJs method?

Something like:

import { base } from '$app/paths';
import initSqlJs from 'sql.js';

export async function load({ fetch }) {
    const SQL = await initSqlJs({
        fetch,
        locateFile: (file: string) => `${base}/wasm/${file}`
    });

...

}

[lovasoa]

https://svelte.dev/docs/kit/load#Making-fetch-requests

Yeah, I had a look at the docs. It doesn't look like any of this applies to us, does it ? That's why I asked: does using the native fetch cause any issue ?

If it does not cause any issue, we are not going to spend time on that :)

[codewithsubham]

are there any update seems to be breaking

sqlUtils.js:15 wasm streaming compile failed: LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable

sqlUtils.js:15 falling back to ArrayBuffer instantiation
sqlUtils.js:15 failed to asynchronously prepare wasm: LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable
sqlUtils.js:15 Aborted(LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable)
sql__js.js?v=dacbcd62:46 Uncaught (in promise) Error: LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable
at Module.onAbort (sql__js.js?v=dacbcd62:46:18)
at G (sql__js.js?v=dacbcd62:558:50)
at sql__js.js?v=dacbcd62:576:13
sql__js.js?v=dacbcd62:562 Uncaught (in promise) RuntimeError: Aborted(LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable). Build with -sASSERTIONS for more info.
at G (sql__js.js?v=dacbcd62:562:17)
at sql__js.js?v=dacbcd62:576:13

[lovasoa]

@codewithsubham : #605

[chrisvire]

ChatGPT suggested this and it works:

export async function load({ fetch }) {
    // Fetch the WebAssembly binary manually using SvelteKit's fetch
    const wasmResponse = await fetch(`${base}/wasm/sql-wasm.wasm`);
    const wasmBinary = await wasmResponse.arrayBuffer();

    // Initialize sql.js with the manually loaded wasm binary
    const SQL = await initSqlJs({ wasmBinary });

    // Do other stuff...
}

@lovasoa, do you see anything wrong with this?

Chris

[lovasoa]

No, but I don't see anything wrong with using the native fetch either ;)