Sql.js file can't be loaded..

[bokolob]

Hello! I've updated my project recently and bumps into problem with sqlite.. During loading of wasm file it tells that something is not a function.

Errors are always like

Uncaught (in promise) RuntimeError: Aborted(LinkError: import object field 'I' is not a Function). Build with -s ASSERTIONS=1 for more info.
    L jeep-sqlite.js:2591
    c jeep-sqlite.js:2641
    promise callback*c jeep-sqlite.js:2641
    initSqlJsPromise jeep-sqlite.js:2642
    promise callback*./node_modules/jeep-sqlite/dist/components/jeep-sqlite.js/sqlWasm</initSqlJs/initSqlJsPromise</< jeep-sqlite.js:2642
    promise callback*./node_modules/jeep-sqlite/dist/components/jeep-sqlite.js/sqlWasm</initSqlJs/initSqlJsPromise</< jeep-sqlite.js:2642
    initSqlJsPromise jeep-sqlite.js:2642
    initSqlJsPromise jeep-sqlite.js:2642
    initSqlJs jeep-sqlite.js:2509
    open jeep-sqlite.js:5053
    _open jeep-sqlite.js:8993
    open jeep-sqlite.js:8459
    open web.js:54
    node_modules chunk-vendors.f7ecd92aff32cda9.js:255
    promise callback*wrapper index.js:193
    open definitions.js:355
    init_database

It fails here -

 const SQL = await sqlWasm({
        locateFile: file => `assets/${file}`
      });

I've tried different versions, but it doesn't help. Last combination is

    "sql.js": "1.6.1",
    "jeep-sqlite": "1.5.4",
    "@capacitor-community/sqlite": "^3.4.0-3",

I think that I have problem with webpack5.

Please help..

[jepiqueau]

@bokolob are you using jeep-sqlite through @capacitor-community/sqlite if it is the case npm uninstall @capacitor-community/sqlite Npm uninstall jeep-sqlite Npm uninstall sql.js Delete the wasm file in the asset directory Npm i @capacitor-community/sqlite Copy the wasm file from sql.js/dist to the asset directory Npx cap sync npm run build Npx cap copy Npx cap open ios or Android It should work

[bokolob]

Thanks! Yes, I use @capacitor-community/sqlite. Now it went further. But I still get the similar error - "TypeError: e.asm.Aa.apply is not a function"

Here

        // Create a new database
        this.mDb = new SQL.Database();
        await setInitialDBToStore(this.dbName, this.store);

[jepiqueau]

@bokolob you should be looking at the apps starter on https://github.com/jepiqueau to help uou starting

[bokolob]

I have quite a big project, and everything worked fine for a year. But now I'm upgrading to latest vue2 and webpack5, and upgrading other libraries as well.

So I'm trying to get what is the reason. I've tried to remove vue.config.js and babel plugin, but it didn't help. It seems that something removes some functions from bundle, but I have no idea how..

What information could I provide?

[bokolob]

Is there unobfuscated version of initSqlJs ?

[jepiqueau]

@bokolob i do not have example with vue2 only with vue3

[jepiqueau]

@bokolob can you share your package.json file

[bokolob]

I've tried with webpack4 and 5, both gives the same result.

{ "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@capacitor-community/sqlite": "^4.1.0-6", "@capacitor/android": "^4.2.0", "@capacitor/app": "^4.0.1", "@capacitor/camera": "^4.1.0", "@capacitor/cli": "^4.2.0", "@capacitor/core": "^4.2.0", "@capacitor/device": "^4.0.1", "@capacitor/share": "^4.0.1", "@capacitor/splash-screen": "^4.0.1", "@font/nunito": "^1.0.3", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/vue-fontawesome": "^2.0.6", "@mapbox/mapbox-gl-language": "^1.0.0", "@mapbox/polyline": "^1.1.1", "@turf/along": "^6.5.0", "@turf/bbox": "^6.5.0", "@turf/bbox-polygon": "^6.5.0", "@turf/centroid": "^6.5.0", "@turf/circle": "^6.5.0", "@turf/clean-coords": "^6.5.0", "@turf/distance": "^6.5.0", "@turf/envelope": "^6.5.0", "@turf/great-circle": "^6.5.0", "@turf/helpers": "^6.5.0", "@turf/length": "^6.5.0", "awesome-notifications": "^3.1.1", "axios": "^0.21.1", "axios-concurrency": "^1.0.4", "axios-retry": "^3.2.3", "buefy": "^0.9.13", "chart.js": "^3.5.1", "chartjs-adapter-moment": "^1.0.0", "chartjs-plugin-annotation": "^1.4.0", "chartjs-plugin-zoom": "^1.1.1", "clipboard": "^2.0.6", "codemirror": "^5.63.3", "color-hash": "^1.0.3", "core-js": "^3.25.1", "eslint-plugin-vue": "^9.4.0", "html5-qrcode": "^2.2.0", "idb-keyval": "^5.0.2", "jwt-decode": "^3.1.2", "lodash": "^4.17.21", "mapbox-gl": "^2.10.0", "marked": "^4.0.12", "moment": "^2.29.4", "node-glob": "^1.2.0", "register-service-worker": "^1.7.2", "set-interval-async": "^2.0.3", "share-api-polyfill": "^1.0.20", "socket.io-client": "^3.1.3", "turf-multipoint": "^1.0.0", "url-template": "^2.0.8", "uuid": "^3.4.0", "vue": "^2.7.10", "vue-100vh": "^0.1.1", "vue-awesome-notifications": "^3.1.1", "vue-codemirror": "^4.0.6", "vue-croppie": "^2.0.2", "vue-i18n": "^8.27.2", "vue-loader": "^17.0.0", "vue-router": "^3.6.4", "vue-translation-manager": "^1.2.0", "vue2-datepicker": "^3.10.1", "vuex": "^3.6.2" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.13", "@vue/cli-plugin-eslint": "~4.5.13", "@vue/cli-plugin-pwa": "~4.5.13", "@vue/cli-plugin-router": "~4.5.13", "@vue/cli-plugin-vuex": "~4.5.13", "@vue/cli-service": "~4.5.13", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "vue-template-compiler": "^2.6.11", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5", "@vue/cli": "~4.5.13", "css-loader": "^5.2.7", "dotenv-webpack": "^8.0.1", "glob-parent": "^5.1.2", "html-webpack-plugin": "^3.2.0", "sass": "^1.54.9", "sass-loader": "^10.3.1" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

[bokolob]

So, It works with older versions, And I think that the bug is in newer versions.

    "@capacitor-community/sqlite": "3.4.0-3",
    "jeep-sqlite": "1.3.6",
    "sql.js": "1.6.2",

But there is another problem with upgrade. It fails when trying to read previous db before upgrade, because there isn't any database in store. And you can't just add upgradeStatement. You need something like this

async function init_database() {
  const platform = Capacitor.getPlatform();
  const sqlite = new SQLiteConnection(CapacitorSQLite);
  let db = null;

  if (platform === "web" && !jeep_defined) {
    await applyPolyfills();
    // await defineCustomElements(window);
    customElements.define("jeep-sqlite", JeepSqlite);
    // Create the 'jeep-sqlite' Stencil component
    const jeepSqlite = document.createElement("jeep-sqlite");

    jeepSqlite.setAttribute("wasmPath", "/app/assets/");

    document.body.appendChild(jeepSqlite);
    await customElements.whenDefined("jeep-sqlite");
    // Initialize the Web store
    await sqlite.initWebStore();
    jeep_defined = true;
  }

  const ret = await sqlite.checkConnectionsConsistency();
  const isConn = (await sqlite.isConnection(DB_NAME)).result;

  if (platform !== "web") {
    await sqlite.addUpgradeStatement(DB_NAME, 1, 2, schema_v2, []);
  }

  if (ret.result && isConn) {
    db = await sqlite.retrieveConnection(DB_NAME);
  } else {
    db = await sqlite.createConnection(
      DB_NAME,
      false,
      "no-encryption",
      VERSION
    );
  }

  await db.open();

  if (platform === "web") {
    await db.execute(schema_v2);
  }

  return db;
}

[jepiqueau]

@bokolob look at https://github.com/jepiqueau/vue-sqlite-app i just update it and it works. You have to do a npm -i --save sql.js@1.7.0 to force to stay on its version. The version 1.8.0 of sql.js which is taken when you upgrade @capacitor-community/sqlite does not seems to work. Look at how i create jeep-sqlite in the main.js file hope this will help you to clarify for vue2 you do not need to install vue-sqlite-hook

[bokolob]

Ok, but I’ve tried this version. I’ll check again later.

In your example you don’t use addUpgradeStatement. However problem happens when it is called.

I need it because I have android app as well.

[jepiqueau]

@bokolob the addUpgradeStatement has change on the last version so look at the doc

[jepiqueau]

@bokolob there is an example in the jeep-sqlite Stencil component

[jepiqueau]

@bokolob this has been fixed with release 1.6.1 of jeep-sqlite which can now works with sql.js@1.8.0 For your project with @capacitor-community/sqlite delete the node_modules directory and the package-lock.json and do a npm install it will bring you with the latest release of jeep-sqlite & sql.js. Good luck and thanks to put that issue on the table

[jepiqueau]

@bokolob did you test the new jeep-sqlite 1.6.1? Is it working now

[jepiqueau]

@bokolob As i do not have any answer from you, i assume you have tried it and it is working. So i will close the issue feel free to re-open it if necessary

[bokolob]

Hello! I've just returning to this task. The issue was caused by service worker.. It seems that wrong wasm version was cached somehow, while other js files not.