I am trying to run SQLite on the web using Ionic Angular, but I encounter this error right after initializing SQLite.

[Nitish-Repo]

i am following this side and i do exact every step from this side
(https://jepiqueau.github.io/2023/08/26/Ionic7Angular-SQLite-CRUD-App.html#part-1---web---table-of-contents)

Plugin version:
{
"name": "ionic7-angular-sqlite-app",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint",
"ionic:serve:before": "npm run copy:sql:wasm",
"copy:sql:wasm": "copyfiles -u 3 node_modules/sql.js/dist/sql-wasm.wasm src/assets"
},
"private": true,
"dependencies": {
"@angular/animations": "^20.0.0",
"@angular/common": "^20.0.0",
"@angular/compiler": "^20.0.0",
"@angular/core": "^20.0.0",
"@angular/forms": "^20.0.0",
"@angular/platform-browser": "^20.0.0",
"@angular/platform-browser-dynamic": "^20.0.0",
"@angular/router": "^20.0.0",
"@capacitor-community/sqlite": "^7.0.1",
"@capacitor/app": "7.0.1",
"@capacitor/core": "7.4.2",
"@capacitor/haptics": "7.0.1",
"@capacitor/keyboard": "7.0.1",
"@capacitor/status-bar": "7.0.1",
"@capacitor/toast": "^7.0.1",
"@ionic/angular": "^8.0.0",
"@ionic/pwa-elements": "^3.3.0",
"ionicons": "^7.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
},

Platform(s):

Current behavior:
chunk-SCNEKAWF.js:58 wasm streaming compile failed: LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable

chunk-SCNEKAWF.js:58 falling back to ArrayBuffer instantiation

chunk-SCNEKAWF.js:58 failed to asynchronously prepare wasm: LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable

chunk-SCNEKAWF.js:58 Aborted(LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable)

chunk-SCNEKAWF.js:58 ERROR Error: LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable

chunk-SCNEKAWF.js:58 ERROR RuntimeError: Aborted(LinkError: WebAssembly.instantiate(): Import #34 "a" "I": function import requires a callable). Build with -sASSERTIONS for more info.

Expected behavior:

Steps to reproduce:

Related code:
import { enableProdMode, importProvidersFrom, APP_INITIALIZER } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';

import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';

import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';
import { defineCustomElements as pwaElements } from '@ionic/pwa-elements/loader';
import { defineCustomElements as jeepSqlite } from 'jeep-sqlite/loader';
import { Capacitor } from '@capacitor/core';
import { InitializeAppService } from './app/services/initialize.app.service';
import { SQLiteService } from './app/services/sqlite.service';
import { StorageService } from './app/services/storage.service';
import { DbnameVersionService } from './app/services/dbname-version.service';

if (environment.production) {
enableProdMode();
}
// --> Below only required if you want to use a web platform
const platform = Capacitor.getPlatform();
if (platform === "web") {
// Web platform
// required for toast component in Browser
pwaElements(window);

// required for jeep-sqlite Stencil component
// to use a SQLite database in Browser
jeepSqlite(window);

window.addEventListener('DOMContentLoaded', async () => {
const jeepEl = document.createElement("jeep-sqlite");
document.body.appendChild(jeepEl);
await customElements.whenDefined('jeep-sqlite');
jeepEl.autoSave = true;
});
}
// Above only required if you want to use a web platform <--

// Define the APP_INITIALIZER factory
export function initializeFactory(init: InitializeAppService) {
return () => init.initializeApp();
}

bootstrapApplication(AppComponent, {
providers: [
SQLiteService,
InitializeAppService,
StorageService,
DbnameVersionService,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
importProvidersFrom(IonicModule.forRoot({})),
provideIonicAngular(),
provideRouter(routes, withPreloading(PreloadAllModules)),
{
provide: APP_INITIALIZER,
useFactory: initializeFactory,
deps: [InitializeAppService],
multi: true
}
],
});

insert short code snippets here

Other information:

Capacitor doctor:

insert the output from `npx cap doctor` here

[mikerentmeister]

I am getting this same error. In my package.json i downgraded "sql.js" from "1.13.0" to "1.11.0", and then everything started working. This package probably needs to be updated to support the new version. I originally found my answer here: https://forum.ionicframework.com/t/problem-capacitor-community-sqlite-with-jeep/247244

[lzinga]

I am getting this same error. In my package.json i downgraded "sql.js" from "1.13.0" to "1.11.0", and then everything started working. This package probably needs to be updated to support the new version. I originally found my answer here: https://forum.ionicframework.com/t/problem-capacitor-community-sqlite-with-jeep/247244

I ran into the same issue and downgrading fixed it.