SQLite in Ionic React App

Ionic Framework Ionic React
1

Is it possible to use SQLite in an Ionic React app that uses capacitor, in a browser?

Background: My client has a really old Ionic/Angular app that’s actively still being used in both IOS and Android. They want me to make quite a few changes to the app but first I need to change it to use current versions of everything. Being that I’m more familiar with react than angular and the client doesn’t really care which language is used, I figured I should re-write it in React.

Issue: The app is extremely dependent on local sqlite database, almost everything in the app is based on CRUD SQL queries. I would like to get the same to work in React. I’m having issues running this in the browser and to run it only on a simulator or actual device is extremely slow when you’re making constant changes

What I tried: I’m following this code GitHub - jepiqueau/react-sqlite-app-starter: Ionic/React SQLite Application Starter
The error I’m getting is:

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

I don’t know how to continue. If anyone can suggest a solution or point me to a tutorial I would greatly appreciate it

Thank you!

2

For anyone running into this problem. I got it to work by following this: sqlite/Web-Usage.md at 1a62cbe78ea27abc53a48b415dd508852c9709ab · capacitor-community/sqlite · GitHub

I don’t know yet if it will also run on a device but it definitely runs in the browser. I’m assuming it’ll be easy enough to get it to work on a device…

3

I take it back, this does not work once you try to run it on an actual device or a simulator. It’s actually been a complete mess, to the point that I wish the client never chose Ionic. Using the solution above I have to use "@capacitor-community/storage-react": "^0.1.0" as this is the latest version and of course this was never updated for ionic 4+. This means that there’s dependency conflicts and then when I try to downgrade to use older versions everything else breaks and on and on and on…

My advice FWIW, don’t use sqlite if you’re planning on testing in the browser

4

Hi.
take it

5

For who ever ends up here next, this is a video of working example in browser and on device

Ionic React SQLite - Working With Ionic Framework And Capacitor