Errors when I use sql.js with webpack in PWA service-worker usecase

Question

I want to use sql-wasm.js (https://github.com/sql-js/sql.js) in PWA service-worker. The reason I want to use it is, fetching mbtiles(sqlite-based web map tiles distribution format) by service-worker, extract web map tile images from it and store them into indexed DB. So I want to use sql-wasm.js for purely read-only use case.

I call sql-wasm.js from my service-worker like this:

import initSqlJs from "./sql-wasm";
import "./sql-wasm.wasm";

...

  initSqlJs({}).then(SQL => {
    //Create the database
    var db = new SQL.Database();
    // Run a query without reading the results
    db.run("CREATE TABLE test (col1, col2);");
    // Insert two rows: (1,111) and (2,222)
    db.run("INSERT INTO test VALUES (?,?), (?,?)", [1,111,2,222]);

    // Prepare a statement
    var stmt = db.prepare("SELECT * FROM test WHERE col1 BETWEEN $start AND $end");
    stmt.getAsObject({$start:1, $end:1}); // {col1:1, col2:111}

    // Bind new values
    stmt.bind({$start:1, $end:2});
    while(stmt.step()) { //
      var row = stmt.getAsObject();
      console.log('Here is a row: ' + JSON.stringify(row));
    }
  });

...

And my webpack-config includes:

    externals: { fs: 'fs', }

After preparing these, I run webpack (4.41.6), then I got this warning

WARNING in ./src/weiwudi_gw_logic.js 78:2-11
"export 'default' (imported as 'initSqlJs') was not found in './sql-wasm'
 @ ./src/weiwudi_gw.js
 @ ./test/src/sw_npm.js

and these errors:

ERROR in ./src/sql-wasm.wasm
Module not found: Error: Can't resolve 'a' in 'F:\github\Weiwudi\src'
 @ ./src/sql-wasm.wasm
 @ ./src/weiwudi_gw_logic.js
 @ ./src/weiwudi_gw.js
 @ ./test/src/sw_npm.js

ERROR in ./src/sql-wasm.wasm
WebAssembly module is included in initial chunk.
This is not allowed, because WebAssembly download and compilation must happen asynchronous.
Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:
* ./test/src/sw_npm.js --> ./src/weiwudi_gw.js --> ./src/weiwudi_gw_logic.js --> ./src/sql-wasm.wasm

How to avoid these errors/warnings?

======

I already got information from this ticket (Trying to understand how to import web-assembly package via webpack), but adding experiments/asyncWebAssembly option works only in webpack5. I want to fix this with webpack4, if possible. Is it impossible?

Answer 1

Finally I succeeded to use wasm-based sqlite in PWA service worker, by using this module:

https://www.npmjs.com/package/sql-wasm

This module includes 2 files

• node_modules/sql-wasm/dist/esm/sql-wasm-browser.js
• node_modules/sql-wasm/dist/sqlite3.wasm

use them with some modification, it works fine.

1. Put sql-wasm-browser.js to same folder with service worker's source code.

2. Add some modification to sql-wasm-browser.js, to avoid error saying "document is not defined"

/* eslint-disable camelcase */
const document = {}; //<= Add this
var createSqlite3Api = (function (module) {

3. Call this from service worker's source code.

import createSqlWasm from "./sql-wasm-browser";

4. Compile by webpack 5, with webpack.config:

    resolve: {
        fallback: {
            fs: false,
            path: false,
            crypto: false
        }
    }

5. Put sqlite3.wasm at same folder with compiled result.

Then it works fine.