Use `sqlite-wasm-rs` with web workers

[LucaCappelletti94]

Hi,

I am trying to use sqlite-wasm-rs as part of a Yew web worker.

This web worker, which is called dbws_worker, is imported in Trunk using the following trunk metadata link:

<link data-trunk rel="rust" href="Cargo.toml" data-bin="dbws_worker" data-type="worker" data-bindgen-target="web" data-weak-refs
    data-wasm-opt="z" />

Now, when I start the application, depending on the browser, I get a few different errors:

In Google Chrome, I get: Uncaught SyntaxError: Failed to execute 'importScripts' on 'WorkerGlobalScope': Cannot use import statement outside a module, which is associated to the following line which gets added to the top of the web worker script:

import { JSUtils } from './snippets/sqlite-wasm-rs-56a7e97fd7d8f783/src/vfs/utils.js';

As illustrated here:

In Safari, I get SyntaxError: Unexpected token '{'. import call expects one or two arguments., but I don't know the line of the error so I am not certain it is related to sqlite-wasm-rs - it is co-occurrent with when I import it though.

Finally, in Firefox I get SyntaxError: import declarations may only appear at top level of a module, which is also referring to the same line as in Google Chrome.

The overall application looks something like this:

If needed, I can try to reduce this to a smaller test example - do let me know whether these information have already given you some ideas to try out.

Have a great day and thank you,
Luca

[Spxg]

I don't know much about yew and trunk, I guess it's because the Worker is not set to module type, see https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker#options

[LucaCappelletti94]

I will try to find a way to set it that way in trunk I guess, will keep you posted.

[LucaCappelletti94]

For future reference, I have opened up an issue asking how to specify type="module" in trunk: trunk-rs/trunk#984

Will post again here if I get any reply and whether it solves this issue.

[LucaCappelletti94]

It turns out, this is a gloo-worker issue after all. I am currently trying to make this 2023 PR be merged in there to add support for module type Web Worker.

[LucaCappelletti94]

For future internauts reference, once this yew-agent PR is merged it will be possible to specify the type=module as such in yew components, and therefore be able to use sqlite-wasm-rs. I am currently finally starting to test it out!

In the following example, DBWSWorker is the name of my worker which is compiled at /dbws_worker.js.

html! {
            <WorkerProvider<DBWSWorker> path="/dbws_worker.js" lazy={false} module={true}>
                <Root />
            </WorkerProvider<DBWSWorker>>
}