bug: Error using jeep-sqlite in NX monorepo (Angular and Ionic): WebAssembly.instantiate() fails when loading sql-wasm.wasm

[vladt-e]

Plugin version:

"@capacitor-community/sqlite": "^6.0.2"

Platform(s):

Web (Angular app inside NX monorepo)

Current behavior:

Using sqlite plugin with jeep-sqlite in an Angular app inside an NX monorepo results in the following WebAssembly errors when loading in the browser:

Expected behavior:

The SQLite WebAssembly module should initialize without errors, allowing database access in the browser as expected.

Steps to reproduce:

1. Create a new Ionic app with Angular inside an NX monorepo
2. Install capacitor-community/sqlite plugin and sql-wasm.wasm file from "node_modules/sql.js/dist/sql-wasm.wasm" to "apps//src/assets"
3. Initialize the component using jeepSqlite(window)
4. Append the element to the DOM
5. Load the app in the browser
6. Check the console for WebAssembly error

Related code:

Here is how I load the plugin for browser into the main.ts file. This configuration is loaded before the app initializes

if (Capacitor.getPlatform() === 'web') {
  jeepSqlite(window);

  window.addEventListener('DOMContentLoaded', async () => {
    const jeepEl = document.createElement('jeep-sqlite');
    jeepEl.autoSave = true;
    // Also tried: jeepEl.setAttribute('wasm-path', 'assets/sql-wasm.wasm');
    document.body.appendChild(jeepEl);
    await customElements.whenDefined('jeep-sqlite');
  });
}

By the other side, the app is initialized with the following methods and the error occurs after executing the database initialization

 async initPlugin(): Promise<void> {
    this.dbConnection = new SQLiteConnection(CapacitorSQLite);

    if (Capacitor.getPlatform() === 'web') {
      await CapacitorSQLite.initWebStore();
    } else {
      const isDevEncrypt = await this.isDeviceEncryption();

      if (isDevEncrypt) {
        await this.setEncryptionPassphrase('<passphrase>');
      }
    }

    await this.initDatabase();
  }

async initDatabase() {
    await CapacitorSQLite.addUpgradeStatement({
      database: this.dbName,
      upgrade: this.versionUpgrades,
    });

    this.db = await this.openDatabase(this.dbName, this.loadToVersion, false);

    if (Capacitor.getPlatform() === 'web') {
      await this.dbConnection.saveToStore(this.dbName);
    }
  }

Other information:

Capacitor doctor:

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 7.2.0
  @capacitor/core: 7.2.0
  @capacitor/android: 7.2.0
  @capacitor/ios: 7.2.0

Installed Dependencies:

  @capacitor/cli: 6.2.0
  @capacitor/ios: 6.1.2
  @capacitor/core: 6.2.0
  @capacitor/android: 6.1.2

[rhettprestwich]

I'm having a similar issue in Vue

Update: the issue seems to be linked to sql.js version 13 (at least for me). When I rolled it back to version 11, the issue went away for me. May be a good idea to fix the dependency version in jeep-sqlite.

[vladt-e]

After I changed the sql.js version to 1.12.0 on the package-lock.json file looks like it works, but now i get the following error every time I call a method that executes an update query

ERROR Error: Run: RunSQL: BeginTransaction: BeginTransaction: cannot start a transaction within a transaction

This happens only on web platform

[NostalgicNKR]

I have temporarily fixed it by downgrading jeep-sqlite version to 2.7.1 and sql.js to 1.10.3 manually from package-lock.json file. BTW its not only happening in monorepos but also in normal projects.

[ghenry22]

yeh I have the same issue in a generic ionic/angular project

[danielread89]

In case this info helps anyone:
This is the first time I'm using this plugin. I was having this problem. After trying a lot of different things, I cloned the sample Ionic 7 / Angular app:
https://github.com/jepiqueau/blog-tutorials-apps/tree/main/SQLite/Part-1/ionic7-angular-sqlite-app

It was working! So I upgraded Ionic on this project to Ionic 8... still working.
Then I upgraded Angular from 17 to 18 -- it broke with this problem.

So something about upgrading to Angular 18 broke it...

[AlexDonn19]

This works on web.
Not NX, Angular 19, Ionic.

1. In package.json:
   "scripts": {
   "ionic:serve:before": "npm run copy:sql:wasm",
   "copy:sql:wasm": "copyfiles -u 3 node_modules/sql.js/dist/sql-wasm.wasm src/assets",
   },
   "dependencies": {
   "@ionic/angular": "^8.0.0",
   "@capacitor-community/sqlite": "^7.0.0",
   "sql.js": "^1.11.0",
   }

2. In main.ts
   providers: [
   provideAppInitializer(async () => {
   const database = inject(DatabaseService);
   return Promise.all([database.initializePlugin(), database.addJeepSqliteElement()]).then(() => {
   return true;
   }).catch((error) => { throw error; });
   }),
   { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
   provideIonicAngular(),
   provideRouter(routes, withPreloading(PreloadAllModules)),
   ],

3. In DatabaseService
   private sqlite!: SQLiteConnection | null;
   initializePlugin(): Promise {
   return new Promise (async resolve => {
   this.sqlite = new SQLiteConnection(CapacitorSQLite);
   resolve(true);
   });
   }

async addJeepSqliteElement() {
const platform = Capacitor.getPlatform();
const sqlite: SQLiteConnection = this.sqlite || new SQLiteConnection(CapacitorSQLite)
try {
if(platform === "web") {
const jeepEl = document.createElement("jeep-sqlite");
document.body.appendChild(jeepEl);
jeepEl.autoSave = true;
await customElements.whenDefined('jeep-sqlite');
await sqlite.initWebStore();
const capSQLiteResult = await sqlite.checkConnectionsConsistency();
}
} catch (err) {
return Promise.reject(new Error(Error: ${err}));
}
return Promise.resolve(true);
}

async initConnection() {
if (this.sqlite) {
console.log('Creating database connection...');
this.db = await this.sqlite.createConnection(this.DB_USERS, false, 'no-encription', 1, false);
console.log('Database connection created:', this.db);
try {
console.log('Opening database connection...');
await this.db.open();
console.log('Database connection opened successfully');
} catch (error) {
console.error('Error opening database connection:', error);
return null;
}
// ....
}

4. In app.component.ts
   private database = inject(DatabaseService);
   ngAfterViewInit() {
   const db = await this.database.initConnection();
   }

[Andrea2099]

I had the same issue with Ionic Angular 19.

My workaround, as suggested, was to override the dependencies in package.json:

"overrides": {
  "sql.js": "1.12",
  "jeep-sqlite": "2.8.0"
}

Then I removed node_modules and package-lock.json, ran npm install, and it worked like a charm.

[robingenz]

If this is still an issue with the latest plugin version, feel free to create a PR.

[github-actions]

It looks like there hasn't been a reply in 30 days, so I'm closing this issue.