javascriptangularsqliteionic-frameworkcapacitor

capacitor-sqlite on desktop web browser: TypeError: x is not a function upon database open


Minimum reproducible example:

https://github.com/folsze/capacitor-v6-sqlite-x-is-not-a-function

The minimal commit with the exact changes that led to the issue:

https://github.com/folsze/capacitor-v6-sqlite-x-is-not-a-function/commit/8beedb051dd5b3670548db975ff8b06a399aea58

capacitor community sqlite: TypeError: x is not a function upon startup, after upgrading to capacitor version 6

when I start my angular ionic capacitor community sqlite app, I get:

ERROR TypeError: x is not a function

in the browser console.

This all happens on the desktop-browser only 🖥️. On native ios/android (🍏/👾) it all works without problems. The browser uses sql-wasm.wasm afaik, so sql.js, an in-memory database, read more here:

https://github.com/capacitor-community/sqlite/blob/master/docs/Web-Usage.md

Steps to reproduce the behavior:

  1. clone this repo: https://github.com/folsze/capacitor-v6-sqlite-x-is-not-a-function
  2. start the app in the desktop browser with npm start
  3. check the console, you will see the error "TypeError: x is not a function"
  4. Expected behavior: No error

related github issue:

https://github.com/capacitor-community/sqlite/issues/574

EDIT: the error somehow also happened after downgrading to capv5 on my minimum reproducible example, but not in my main codebase capv5:

https://github.com/folsze/capacitor-v6-sqlite-x-is-not-a-function/commit/4201f5156bdf47f0d6744c9f7cd29fd7ccf41a1a

very strange.


Solution

  • Solved in this github issue:

    https://github.com/capacitor-community/sqlite/issues/574#issuecomment-2269161964

    Hello, I just found a way to run with Ionic v8. The problem (at least in my case) was the version of the sql.js. Use combatible version of sql.js (1.10.3) and copy the sql-wasm.wasm for the version 1.10.3 Here is the updated version of package.json

    {
      "private": true,
      "version": "0.0.1",
      "type": "module",
      "scripts": {
        "dev": "vite",
        "build": "vue-tsc && vite build",
        "preview": "vite preview",
        "test:e2e": "cypress run",
        "test:unit": "vitest",
        "lint": "eslint ."
      },
      "dependencies": {
        "@capacitor-community/sqlite": "^6.0.1",
        "@capacitor/android": "6.1.1",
        "@capacitor/app": "6.0.0",
       
        "@ionic/vue": "^8.0.0",
        "@ionic/vue-router": "^8.0.0",
        "@types/geojson": "^7946.0.14",
        "@types/leaflet": "^1.9.12",
        "ionicons": "^7.0.0",
        "jeep-sqlite": "^2.7.2",
        "sql.js": "1.10.3", // use specific version
      }
    }