Description
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 [email protected]
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:
The electron build source files that are present:
The capacitor configuration file copied to Electron on capacitor sync:
Desktop (please complete the following information):
- OS: Mac OS Venture 13.3.1 (MacBook Pro M1 chip)
- Browser Electron
- Version @capacitor-community/electron": "^4.1.2",
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 :)