failed to compile wasm module: RangeError: WebAssembly.Compile is disallowed on the main thread

[Capacity-Dev]

I'm creating an electron App then i want to use node-sqlite3-wasm I was using better-sqlite3 before, to switch to node-sqlite3-wasm, I just changed the lines:

const Database = require('better-sqlite3');
const db = new Database('foobar.db', { verbose: console.log });

to

const { Database } = require("node-sqlite3-wasm");
const db = new Database('breach.db', { fileMustExist: true });

of course I also changed the request methods like db.prepare() to equivalents...

but when i run my app, i get this error :

failed to compile wasm module: RangeError: WebAssembly.Compile is disallowed on the main thread, if the buffer size is larger than 4KB. Use WebAssembly.compile, or compile on a worker thread.
instantiateSync @ VM167 node-sqlite3-wasm.js:8
VM161 renderer_init:2 Unable to load preload script: /Path/to/my-app/src/preload.js
(anonymous) @ VM161 renderer_init:2
VM161 renderer_init:2 RangeError: WebAssembly.Compile is disallowed on the main thread, if the buffer size is larger than 4KB. Use WebAssembly.compile, or compile on a worker thread.
    at instantiateSync (VM167 node-sqlite3-wasm.js:8:18906)
    at createWasm (VM167 node-sqlite3-wasm.js:8:19965)
    at VM167 node-sqlite3-wasm.js:8:33718
    at Object.<anonymous> (VM167 node-sqlite3-wasm.js:15:5)
    at Object.<anonymous> (VM167 node-sqlite3-wasm.js:23:3)
    at Module._compile (VM126 loader:1269:14)
    at Module._extensions..js (VM126 loader:1324:10)
    at Module.load (VM126 loader:1124:32)
    at Module._load (VM126 loader:965:12)
    at f._load (VM158 asar_bundle:2:13330)

i included the module from preload.js and serve it to index.html via contextBridge.exposeInMainWorld

can sameone tell me how to solve this problem please ?

[tndrle]

I don't know if you can load it in the preload script directly. I load it in the main script and connect it to the preload script with ipcMain. Then, in the preload script, I use exposeInMainWorld.

More or less like this:

main.js

import sqlite from "node-sqlite3-wasm";

let database;

ipcMain.handle("db-open", (_evt, path, fileMustExist) => {
  database = new sqlite.Database(path, { fileMustExist });
});

preload.js

contextBridge.exposeInMainWorld("db", {
  open: (path, fileMustExist) => ipcRenderer.invoke("db-open", path, fileMustExist),
});

renderer.js

await window.db.open(path, false);

[Capacity-Dev]

I don't know if you can load it in the preload script directly. I load it in the main script and connect it to the preload script with ipcMain. Then, in the preload script, I use exposeInMainWorld.

More or less like this:

main.js

import sqlite from "node-sqlite3-wasm";

let database;

ipcMain.handle("db-open", (_evt, path, fileMustExist) => {
  database = new sqlite.Database(path, { fileMustExist });
});

preload.js

contextBridge.exposeInMainWorld("db", {
  open: (path, fileMustExist) => ipcRenderer.invoke("db-open", path, fileMustExist),
});

renderer.js

await window.db.open(path, false);

It Works, Thank you !