sqlite: Cannot find database when launched in Electron

Describe the bug Following errors are present when launching Ionic/Angular application with “@capacitor-community/sqlite”: “^5.0.0” and “@capacitor-community/electron”: “^4.1.2”:

Cannot find module '/Volumes/Projects/htdocs/electron-ionic/ionic-sqlite/electron/node_modules/@journeyapps/sqlcipher/lib/binding/napi-v6-darwin-arm64/node_sqlite3.node'

Cannot find module '/Volumes/Projects/htdocs/electron-ionic/ionic-sqlite/electron/node_modules/@journeyapps/sqlcipher/lib/binding/napi-v6-darwin-arm64/node_sqlite3.node'

Error: Uncaught (in promise): Error: The jeep-sqlite element is not present in the DOM! Please check the @capacitor-community/sqlite documentation for instructions regarding the web platform.
Error: The jeep-sqlite element is not present in the DOM! Please check the @capacitor-community/sqlite documentation for instructions regarding the web platform.

To Reproduce Steps to reproduce the behavior:

Create the application in Ionic 7/Angular 16 using the following steps:

ionic start ionic-sqlite blank --type=angular
cd ./ionic-sqlite/
npm run build
npm install --save @capacitor-community/electron
npx cap add @capacitor-community/electron

// Change into Electron directory and install node packages
cd ..
npm install --save @journeyapps/sqlcipher
npm install --save jszip
npm install --save node-fetch@2.6.7
npm run build --prod
cd ..
npm install --save @capacitor-community/sqlite
npm install --save @capacitor/camera
npm install --save @ionic/pwa-elements

// Sanity check to ensure ALL modules are installed that should be
cd electron 
npm install
npm run build --prod

cd ..
npm run build --prod
npx cap sync @capacitor-community/electron
npx cap copy @capacitor-community/electron
npx cap open @capacitor-community/electron

Expected behavior I believe (perhaps incorrectly?) that I have imported the correct modules and followed the correct steps to be able to use the sqlite plugin within an Ionic 7 application launched as an Electron desktop app via the @capacitor-community/electron plugin.

When I perform a build and publish the application to electron for testing on my system using the following commands:

npm run build --prod
npx cap sync @capacitor-community/electron
npx cap open @capacitor-community/electron

The project is built, with no errors in the Ionic CLI, and launched as an Electron application but multiple errors are reported in the developer console of the Electron browser environment - please see attached screenshots below.

Screenshots

The errors thrown up when the application is launched in an Electron environment:

electron-sqlite-errors

The electron build source files that are present:

electron-environment-source

The capacitor configuration file copied to Electron on capacitor sync: Electron-capacitor-configuration

Desktop (please complete the following information):

Additional context Package.json file:

  "name": "ionic-sqlite",
  "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"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.0.0",
    "@angular/common": "^16.0.0",
    "@angular/compiler": "^16.0.0",
    "@angular/core": "^16.0.0",
    "@angular/forms": "^16.0.0",
    "@angular/platform-browser": "^16.0.0",
    "@angular/platform-browser-dynamic": "^16.0.0",
    "@angular/router": "^16.0.0",
    "@capacitor-community/electron": "^4.1.2",
    "@capacitor-community/sqlite": "^5.0.0",
    "@capacitor/app": "5.0.2",
    "@capacitor/camera": "^5.0.2",
    "@capacitor/core": "5.0.4",
    "@capacitor/haptics": "5.0.2",
    "@capacitor/keyboard": "5.0.2",
    "@capacitor/status-bar": "5.0.2",
    "@ionic/angular": "^7.0.0",
    "@ionic/pwa-elements": "^3.1.1",
    "ionicons": "^7.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.0.0",
    "@angular-eslint/builder": "^16.0.0",
    "@angular-eslint/eslint-plugin": "^16.0.0",
    "@angular-eslint/eslint-plugin-template": "^16.0.0",
    "@angular-eslint/schematics": "^16.0.0",
    "@angular-eslint/template-parser": "^16.0.0",
    "@angular/cli": "^16.0.0",
    "@angular/compiler": "^16.0.0",
    "@angular/compiler-cli": "^16.0.0",
    "@angular/language-service": "^16.0.0",
    "@capacitor/cli": "5.0.4",
    "@ionic/angular-toolkit": "^9.0.0",
    "@types/jasmine": "~4.3.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.26.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~4.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ts-node": "^8.3.0",
    "typescript": "~5.0.2"
  },
  "description": "An Ionic project"
}

Does the Electron version need to mirror the Web set up for SQLite and use the jeep-sqlite plugin?

I could not see anything in the Electron documentation for the SQLite plugin that stated this was a requirement yet the error, when published to Electron, seems to suggest that this is the case??

I just need to clarify that I haven’t missed any vital steps in getting this plugin to work with Electron, that the documentation isn’t incomplete or that there isn’t a bug here.

It’s likely a bone-headed mistake on my part but I really appreciate any help that can be provided here 😃

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 81 (32 by maintainers)

Most upvoted comments

Not yet. I’m struggling to build a windows package and haven’t had the time yet to investigate it further. I will do so, as soon as possible.

@jepiqueau Will do - as I am also experiencing almost the same issue with the incorrect directory not being published on the following system with the Ionic 7/Angular/SQLite starter app:

  • Mac OS
  • Monterey 12.4
  • Intel Quad-Core i7
  • MB Pro 2016

In this instance, when running the npm run electron:start command I get the following error:

intel-chip-mac-issue-1

However this time there is NO directory being generated in the location where the error occurs:

intel-chip-mac-issue-2

I’ll raise this will @journeyapps/sqlcipher and see what can be done.

Will post updates here (as surely I can’t be the only one experiencing this?)