Error: out of memory

[manathat]

Good Day,

When I try to open the SQLiteDBConnection after calling the create connection is as follows.

let db: SQLiteDBConnection = await sqlite.createConnection('mydb',false,'no-encryption',1,false); await db.open();

It throws error shown like below.

app.component.ts:33 ERROR Error: out of memory
    at f.handleError (jeep-sqlite.entry.js:2577:292)
    at new f (jeep-sqlite.entry.js:2562:215)
    at jeep-sqlite.entry.js:5548:24
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:22:1)
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Object.onInvoke (core.mjs:14712:33)
    at _ZoneDelegate.invoke (zone.js:367:52)
    at Zone.run (zone.js:129:43)

[jepiqueau]

@manathat c

[jepiqueau]

@manathat can you shre your app so i can reproduce the issue.

[manathat]

@jepiqueau sure. Invited you as collaborator

please check the below repo link.
https://github.com/manathat/HabitTracker.git

[jepiqueau]

@manathat
in the main.ts file you must have

const platform = Capacitor.getPlatform();
if(platform === "web") {

  jeepSqlite(window);
  window.addEventListener('DOMContentLoaded', async () => {
    const jeepEl = document.createElement("jeep-sqlite");
    document.body.appendChild(jeepEl);
    jeepEl.autoSave = true;
  });
}

otherwise the jeep-sqlite component is not created
Now you have also to update to jeep-sqlite@2.5.5 as i did not see the new release of sql.js@1.9.0 which was given the error
hope this will fix your issue and thanks for pointing out this to me

[jepiqueau]

@manathat Please close the issue if it works on your side

[manathat]

@jepiqueau Thanks for your advice. The issue is resolved.

[gpetrov]

@jepiqueau Unfortunately this didn't help in our case, the out of memory still happens directly on sqlite.open

jeep-sqlite element is created pretty much as the example above:

dmx.sqlite = Capacitor.Plugins.CapacitorSQLite;

dmx.Startup(new Promise((resolve, reject) => {
  document.addEventListener('DOMContentLoaded', () => {
    const platform = Capacitor.getPlatform();

    if (platform == 'web') {
      if (!document.querySelector('script[src*="jeep-sqlite"]')) {
        return reject(Error('jeep-sqlite not detected'));
      }
      const jeep = document.createElement('jeep-sqlite');
      jeep.setAttribute('autoSave', 'true');
      document.body.append(jeep);
      if (dmx.debug) console.debug('Init jeep sqlite component');
      customElements.whenDefined('jeep-sqlite').then(() => {
        if (dmx.debug) console.debug('Init Web Store');
        dmx.sqlite.initWebStore().then(resolve);
      });
    } else {
      if (dmx.debug) console.debug('Native platform');
      resolve();
    }
  });
}).then(() => {
  // check for upgrade statements
  if (dmx.debug) console.debug('Init databases', dmx.databases);
  if (dmx.databases && Object.keys(dmx.databases).length) {
    return Promise.all(Object.keys(dmx.databases).filter(database => {
      return dmx.databases[database].type == null || dmx.databases[database].type == 'sqlite';
    }).map(database => {
      const { version, upgrade } = dmx.databases[database];

      if (dmx.debug) console.debug(`Init database "${database}" version ${version}`);

      return Promise.all(upgrade.map(upgrade => {
        if (dmx.debug) console.debug(`Adding upgrade statement for ${database}:`, upgrade);
        return dmx.sqlite.addUpgradeStatement({ database, upgrade: [upgrade] });
      })).then(() => {
        if (dmx.debug) console.debug(`Check database ${database} consistency`);
        return dmx.sqlite.checkConnectionsConsistency({dbNames:[database], openModes:["RW"]});
      }).then(() => {
        if (dmx.debug) console.debug(`Connect to database ${database} version ${version}`);
        return dmx.sqlite.createConnection({ database, version });
      }).then(() => {
        if (dmx.debug) console.debug(`Open database ${database}`);
        //--->>>> here the out of memory error occurs:
        return dmx.sqlite.open({ database });
      }).then(() => {
        if (dmx.debug) console.debug(`Database ${database} ready`);
      });
    }));
  }
}));

The error in the browser is:

[onmax]

Hello, I am having the same issue

Unfortunately, I am not able to share my source code, but I have a similar code @gpetrov. This error only happens in Web (I am using capacitor-community/sqlite).

Debugging, you can see that g is equals to 14. Not sure if this helps.

Thank you!

[jepiqueau]

@onmax can you share your package.json. is it happening when you do the connection or when you open the database or descibed any other action which framework are you using

[jepiqueau]

@onmax did you copy the sql-wasm.wasm?

[jepiqueau]

@gpetrov @onmax can you give me the version of the @capacitor-community/sqlite, jeep-sqlite and the sql.js that you are using look into the node_modules

[onmax]

I think the problem is sql.js: sql-js/sql.js#561

I am using pnpm, and I am trying to override the version of sql-js from 1.9.0 to 1.8.0, but so far I didn't manage to do it correctly.

@onmax can you share your package.json. is it happening when you do the connection or when you open the database or descibed any other action which framework are you using

Here is the code I am using, which it is a composable using Vue reactivity:

Code

async function init() {
    if (isWeb) {
      await customElements.whenDefined('jeep-sqlite')
      document.body.appendChild(document.createElement('jeep-sqlite'))
      await sqlite.initWebStore()
    }

    if (import.meta.env.DEV)
      // eslint-disable-next-line no-console
      console.log(`📚 Initializing database`, migrations)

    for (const { statements, version } of migrations)
      await sqlite.addUpgradeStatement(DB_NAME, version, statements)

    if (isWeb) {
      await open()
      await sqlite.saveToStore(DB_NAME)
    }

    dbExists.value = !!(await sqlite.isDatabase(DB_NAME)).result
  }

  async function open() {
    // await init()
    const encrypted = !isWeb // Only encrypt on mobile
    const mode = encrypted ? 'secret' : 'no-encryption'

    db.value = (await sqlite.checkConnectionsConsistency()).result && (await sqlite.isConnection(DB_NAME, false)).result
      ? await sqlite.retrieveConnection(DB_NAME, false)
      : await sqlite.createConnection(DB_NAME, encrypted, mode, DB_VERSION, false)
    // Everything works until here

    // !!!!!!!!!!!!!!!! the next line will raise the error
    await db.value!.open()


    resolveUnlockDb()
    dbExists.value = !!(await sqlite.isDatabase(DB_NAME)).result
  }

package.json

{
  "name": "APP_NAME",
  "type": "module",
  "version": "0.0.9",
  "private": true,
  "description": "An Ionic project",
  "scripts": {
    "dev:android": "ionic cap run android --livereload --external --watch",
    "dev:ios": "ionic cap run ios --livereload --external --watch",
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "release": "ionic cap build --prod",
    "preview": "vite preview",
    "test:e2e": "cypress run",
    "test:unit": "vitest",
    "lint": "eslint"
  },
  "dependencies": {
    "@capacitor-mlkit/barcode-scanning": "^5.3.0",
    "@capacitor/browser": "^5.1.0",
    "@capacitor/share": "^5.0.6",
    "@nimiq/utils": "^0.9.3",
    "@vueuse/core": "^10.7.0",
    "@vueuse/integrations": "^10.7.0",
    "fuse.js": "^6.6.2",
    "pinia": "^2.1.7",
    "qr-scanner-wechat": "^0.1.3",
    "radix-vue": "^1.2.5",
    "youtube-player": "^5.6.0"
  },
  "devDependencies": {
    "@antfu/eslint-config": "1.0.0-beta.29",
    "@capacitor-community/sqlite": "^5.4.1",
    "@capacitor/android": "^5.6.0",
    "@capacitor/app": "^5.0.6",
    "@capacitor/cli": "^5.6.0",
    "@capacitor/clipboard": "^5.0.6",
    "@capacitor/core": "^5.6.0",
    "@capacitor/haptics": "^5.0.6",
    "@capacitor/ios": "^5.6.0",
    "@capacitor/keyboard": "^5.0.7",
    "@capacitor/push-notifications": "^5.1.0",
    "@capacitor/status-bar": "^5.0.6",
    "@ionic/cli": "^7.1.5",
    "@ionic/core": "^7.6.1",
    "@ionic/vue": "^7.6.1",
    "@ionic/vue-router": "^7.6.1",
    "@nimiq/core-web": "^1.6.2",
    "@total-typescript/ts-reset": "^0.5.1",
    "@types/youtube-player": "^5.5.11",
    "@vitejs/plugin-legacy": "^4.1.1",
    "@vitejs/plugin-vue": "^4.5.2",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/test-utils": "^2.4.3",
    "autoprefixer": "^10.4.16",
    "cypress": "^12.17.4",
    "eslint": "^8.56.0",
    "eslint-plugin-vue": "^9.19.2",
    "ionicons": "^7.2.2",
    "jeep-sqlite": "^2.5.5",
    "jsdom": "^21.1.2",
    "postcss": "^8.4.32",
    "tailwindcss": "^3.3.7",
    "tailwindcss-nimiq-theme": "^0.2.2",
    "terser": "^5.26.0",
    "typescript": "^4.9.5",
    "vite": "^4.5.1",
    "vite-plugin-checker": "^0.6.2",
    "vite-plugin-pwa": "^0.16.7",
    "vitest": "^0.34.6",
    "vue": "^3.3.13",
    "vue-router": "^4.2.5",
    "vue-tsc": "^1.8.25"
  }
}

{
    "jeep-sqlite": "2.5.5",
    "sql-js": "1.9.0"
}

@onmax did you copy the sql-wasm.wasm?

Yes. I have it in the right place. And it works on Android and iOS

[gpetrov]

I can confirm this is a problem with sql.js 1.9.0

Our versions are:

    "@capacitor-community/sqlite": "^5.5.0",
    "@capacitor/android": "^5.5.1",
    "@capacitor/camera": "^5.0.7",
    "@capacitor/core": "^5.5.1",
    "@ionic/pwa-elements": "^3.2.2",
    "jeep-sqlite": "^2.5.5",
    "sql.js": "^1.9.0"

when pinning the sql.js to 1.8.0 problem is solved @jepiqueau

[jepiqueau]

@gpetrov thank you for your contribution, i will publish jeep-sqlite@2.5.6 where i step back to sql.js@1.8.0

[jepiqueau]

@gpetrov This is done

[ccapndave]

This issue still exists for me on 2.5.8 and I had to downgrade to 2.5.6 to get rid of it. Is that expected?

[jepiqueau]

@ccapndave no. Did you copy the new sql-wasm.wasm release 1.10.2 of sql.js

[gpetrov]

@ccapndave no. Did you copy the new sql-wasm.wasm release 1.10.2 of sql.js

The issue in sql.js is still not solved even in the latest 1.10.2 @jepiqueau

There is a new bug report sql-js/sql.js#568