Блог

Можно ли использовать SQLite (документацию SQLite — Ionic) в моем веб-приложении Ionic React, когда оно запущено в браузере? SQLite — это плагин Cordova, но его можно использовать и в приложении React: приложения React используют Capacitor для создания собственных мобильных приложений. Однако можно использовать Ionic Native (и, следовательно, плагины Cordova) (React — Ionic Native Community — Ionic Documentation). В официальной документации плагина говорится, что платформа браузера теперь поддерживается (GitHub — storesafe / cordova-sqlite-storage: …), Но это конкретно не относится к Ionic или React.

Я не понимаю, как заставить плагин SQLite работать с React в браузере?

Этот код не выдает никаких ошибок, и из того, что я прочитал, он будет работать на телефоне Android или iOS:

 import { IonAlert, IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import React, { useState } from 'react';
import ExploreContainer from '../components/ExploreContainer';
import './Home.css';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite'


const Home: React.FC = () => {
  const [showAlert, setShowAlert] = useState(false);
  const initDb = (): void => {
    SQLite.create({
      name: 'data.db',
      location: 'default'
    })
      .then((db: SQLiteObject) => {

        db.executeSql('create table danceMoves(name VARCHAR(32))', [])
          .then(() => console.log('Executed SQL'))
          .catch(e => console.log(e));

      })
      .catch(e => console.log(e));
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Blank</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonButton onClick={initDb}>Init DB</IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Home;
 

В браузере (ionic serve) Я получаю это сообщение об ошибке, за которым следуют десятки желтых ошибок:

Ошибка типа: не удается получить доступ к свойству «then», ionic_native_sqlite__WEBPACK_IMPORTED_MODULE_5_.SQLite.create(…) не определено в initDb C:/Users/UserAccount/Documents/Ionic-Projekte/Test-1-SQLite-Blank/src/pages/Home.tsx:12

    9 | const Home: React.FC = () => {
  10 |   const [showAlert, setShowAlert] = useState(false);
  11 |   const initDb = (): void => {
> 12 |     SQLite.create({
  13 |       name: 'data.db',
  14 |       location: 'default'
  15 |     })