Sqlite: Uncaught (in promise): TypeError: Cannot read property 'split' of undefined TypeError:

#1

I followed this tutorial https://ionicframework.com/docs/native/sqlite but after clicking a button when I call a function to create a table then I am getting below error, please help me to solve this issue:

Runtime Error
Uncaught (in promise): TypeError: Cannot read property ‘split’ of undefined TypeError: Cannot read property ‘split’ of undefined at get (http://192.168.43.113:8100/build/vendor.js:57299:22) at getPlugin (http://192.168.43.113:8100/build/vendor.js:57331:12) at checkAvailability (http://192.168.43.113:8100/build/vendor.js:67875:86) at http://192.168.43.113:8100/build/vendor.js:91789:102 at SQLite.create (http://192.168.43.113:8100/build/vendor.js:91794:11) at http://192.168.43.113:8100/build/5.js:164:42 at t.invoke (http://192.168.43.113:8100/build/polyfills.js:3:14976) at Object.onInvoke (http://192.168.43.113:8100/build/vendor.js:5445:33) at t.invoke (http://192.168.43.113:8100/build/polyfills.js:3:14916) at r.run (http://192.168.43.113:8100/build/polyfills.js:3:10143)
Stack
Error: Uncaught (in promise): TypeError: Cannot read property ‘split’ of undefined
TypeError: Cannot read property ‘split’ of undefined
at get (http://192.168.43.113:8100/build/vendor.js:57299:22)
at getPlugin (http://192.168.43.113:8100/build/vendor.js:57331:12)

controller ts file

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite/ngx';

@IonicPage()
@Component({
  selector: 'page-stats',
  templateUrl: 'stats.html'
})
export class StatsPage {
  currentItems: any = [];

  data = { date: '', type: '', description: '', amount: 0 };
  constructor(
    private platform: Platform,
    public navCtrl: NavController,
    private sqlite: SQLite,
    public navParams: NavParams
  ) {}

  addData() {
    alert('called');
    return new Promise((resolve, reject) => {
      this.platform.ready().then(val => {
        alert('called2'); // upto this i am getting alert but after this it throws error
        this.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));
      });
    });
  }
}

app.module.ts

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Camera } from '@ionic-native/camera';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { SQLite } from '@ionic-native/sqlite/ngx';
import { IonicStorageModule, Storage } from '@ionic/storage';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { Items } from '../mocks/providers/items';
import { Settings } from '../providers';
import { MyApp } from './app.component';
import { Toast } from '@ionic-native/toast/ngx';
// The translate loader needs to know where to load i18n files
// in Ionic's static asset pipeline.
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

export function provideSettings(storage: Storage) {
  /**
   * The Settings provider takes a set of default settings for your app.
   *
   * You can add new settings options at any time. Once the settings are saved,
   * these values will not overwrite the saved values (this can be done manually if desired).
   */
  return new Settings(storage, {
    option1: true,
    option2: 'Ionitron J. Framework',
    option3: '3',
    option4: 'Hello'
  });
}

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    Items,
    Camera,
    SplashScreen,Toast,
    StatusBar,
    { provide: Settings, useFactory: provideSettings, deps: [Storage] },
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    SQLite
  ]
})
export class AppModule { }

package.json

{
  "name": "bmi2",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/camera": "4.3.3",
    "@ionic-native/core": "~4.18.0",
    "@ionic-native/splash-screen": "~4.18.0",
    "@ionic-native/sqlite": "^5.0.0",
    "@ionic-native/status-bar": "~4.18.0",
    "@ionic-native/toast": "^5.0.0",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "8.0.0",
    "@ngx-translate/http-loader": "^2.0.0",
    "cordova-android": "7.1.4",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.3.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-toast": "2.7.2",
    "cordova-sqlite-storage": "2.6.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.1",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-x-toast": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Version info

ionic (Ionic CLI) : 4.8.0 (C:\Users\Ashutosh\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.1

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.2, (and 6 other plugins)

System:

Android SDK Tools : 26.1.1 (D:\androidSDK)
NodeJS : v10.13.0
npm : 6.4.1
OS : Windows 8.1

How to update cordova and ionic?
#2

This one is using cordova. So of course, you need to test it on your mobile phone directly. Have you done this?
Anyway I would just use the normal Storage Module: https://ionicframework.com/docs/building/storage/
It’s pretty nice. Or what is your purpose?

#3

hello

i found solution this is because of ionic new version update. I Advise you to use second last version of plugin.

you can edit older version in your project package.json file
or
you can specify version at the installation time.

thank :slight_smile:

3 Likes
#4

Please Find Solution Here -> https://stackoverflow.com/a/54365080/3725226

#5

Hi what is the second last version or where can it be found? new to ionic and have same exact problem

#6
1 Like