Ionic-native: can't find sqlitePlugin variable

Created on 12 Oct 2016  Â·  36Comments  Â·  Source: ionic-team/ionic-native

I installed the sqliteplugin with ionic but when I import it then I get this error:

Chrome:

1     332360   error    EXCEPTION: Uncaught (in promise): ReferenceError: sqlitePlugin is not defined
2     332360   error    ORIGINAL STACKTRACE:
3     332360   error    Error: Uncaught (in promise): ReferenceError: sqlitePlugin is not defined
    at s (http://localhost:8100/build/polyfills.js:3:8546)
    at new t (http://localhost:8100/build/polyfills.js:3:15640)
    at SQLite.openDatabase (http://localhost:8100/build/main.js:78532:16)
    at new DataService (http://localhost:8100/build/main.js:82562:22)
    at AppModuleInjector.get (AppModule.ngfactory.js:301:67)
    at AppModuleInjector.getInternal (AppModule.ngfactory.js:432:51)
    at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:8385:27)
    at ElementInjector.get (http://localhost:8100/build/main.js:10468:48)
    at ElementInjector.get (http://localhost:8100/build/main.js:10468:48)
    at ElementInjector.get (http://localhost:8100/build/main.js:10468:48)
4     332362   error    Unhandled Promise rejection:, sqlitePlugin is not defined, ; Zone:, angular, ; Task:, Promise.then, ; Value:, [object Object], ReferenceError: sqlitePlugin is not defined
    at http://localhost:8100/build/main.js:78533:13
    at new t (http://localhost:8100/build/polyfills.js:3:15614)
    at SQLite.openDatabase (http://localhost:8100/build/main.js:78532:16)
    at new DataService (http://localhost:8100/build/main.js:82562:22)
    at AppModuleInjector.get (AppModule.ngfactory.js:301:67)
    at AppModuleInjector.getInternal (AppModule.ngfactory.js:432:51)
    at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:8385:27)
    at ElementInjector.get (http://localhost:8100/build/main.js:10468:48)
    at ElementInjector.get (http://localhost:8100/build/main.js:10468:48)
    at ElementInjector.get (http://localhost:8100/build/main.js:10468:48)

Safari:

1     024328   error    EXCEPTION: Uncaught (in promise): ReferenceError: Can't find variable: sqlitePlugin
2     024328   error    ORIGINAL STACKTRACE:
3     024329   error    s@http://localhost:8100/build/polyfills.js:3:8555
t@http://localhost:8100/build/polyfills.js:3:15641
openDatabase@http://localhost:8100/build/main.js:78532:27
DataService@http://localhost:8100/build/main.js:82562:34
get
getInternal
get@http://localhost:8100/build/main.js:8385:38
get@http://localhost:8100/build/main.js:10468:51
get@http://localhost:8100/build/main.js:10468:51
get@http://localhost:8100/build/main.js:10468:51
createInternal
create@http://localhost:8100/build/main.js:10795:48
create@http://localhost:8100/build/main.js:6207:42
_viewInit@http://localhost:8100/build/main.js:46249:50
_transition@http://localhost:8100/build/main.js:46234:27
_nextTrns@http://localhost:8100/build/main.js:46196:29
_queueTrns@http://localhost:8100/build/main.js:46096:23
ngAfterViewInit@http://localhost:8100/build/main.js:54792:22
detectChangesInternal
detectChanges@http://localhost:8100/build/main.js:10730:35
detectChanges@http://localhost:8100/build/main.js:10835:48
detectViewChildrenChanges@http://localhost:8100/build/main.js:10756:32
detectChangesInternal@http://localhost:8100/build/main.js:10741:39
detectChanges@http://localhost:8100/build/main.js:10730:35
detectChanges@http://localhost:8100/build/main.js:10835:48
detectChanges@http://localhost:8100/build/main.js:8794:33
ngOnInit@http://localhost:8100/build/main.js:49038:53
detectChangesInternal
detectChanges@http://localhost:8100/build/main.js:10730:35
detectChanges@http://localhost:8100/build/main.js:10835:48
detectChanges@http://localhost:8100/build/main.js:8794:33
forEach@[native code]
tick@http://localhost:8100/build/main.js:8235:45
_loadComponent@http://localhost:8100/build/main.js:8213:18
bootstrap@http://localhost:8100/build/main.js:8204:28
forEach@[native code]
_moduleDoBootstrap@http://localhost:8100/build/main.js:8106:49
http://localhost:8100/build/main.js:8074:45
onInvoke@http://localhost:8100/build/main.js:7385:43
run@http://localhost:8100/build/polyfills.js:3:10793
http://localhost:8100/build/polyfills.js:3:8892
invokeTask@http://localhost:8100/build/polyfills.js:3:14034
onInvokeTask@http://localhost:8100/build/main.js:7376:47
invokeTask@http://localhost:8100/build/polyfills.js:3:13977
runTask@http://localhost:8100/build/polyfills.js:3:11399
i@http://localhost:8100/build/polyfills.js:3:8013
u@http://localhost:8100/build/polyfills.js:2:7864
http://localhost:8100/build/polyfills.js:2:7988
r@http://localhost:8100/build/polyfills.js:2:6435
4     024329   error    Unhandled Promise rejection:, Can't find variable: sqlitePlugin, ; Zone:, angular, ; Task:, Promise.then, ; Value:, [object Object], http://localhost:8100/build/main.js:78533:25
t@http://localhost:8100/build/polyfills.js:3:15615
openDatabase@http://localhost:8100/build/main.js:78532:27
DataService@http://localhost:8100/build/main.js:82562:34
get
getInternal
get@http://localhost:8100/build/main.js:8385:38
get@http://localhost:8100/build/main.js:10468:51
get@http://localhost:8100/build/main.js:10468:51
get@http://localhost:8100/build/main.js:10468:51
createInternal
create@http://localhost:8100/build/main.js:10795:48
create@http://localhost:8100/build/main.js:6207:42
_viewInit@http://localhost:8100/build/main.js:46249:50
_transition@http://localhost:8100/build/main.js:46234:27
_nextTrns@http://localhost:8100/build/main.js:46196:29
_queueTrns@http://localhost:8100/build/main.js:46096:23
ngAfterViewInit@http://localhost:8100/build/main.js:54792:22
detectChangesInternal
detectChanges@http://localhost:8100/build/main.js:10730:35
detectChanges@http://localhost:8100/build/main.js:10835:48
detectViewChildrenChanges@http://localhost:8100/build/main.js:10756:32
detectChangesInternal@http://localhost:8100/build/main.js:10741:39
detectChanges@http://localhost:8100/build/main.js:10730:35
detectChanges@http://localhost:8100/build/main.js:10835:48
detectChanges@http://localhost:8100/build/main.js:8794:33
ngOnInit@http://localhost:8100/build/main.js:49038:53
detectChangesInternal
detectChanges@http://localhost:8100/build/main.js:10730:35
detectChanges@http://localhost:8100/build/main.js:10835:48
detectChanges@http://localhost:8100/build/main.js:8794:33
forEach@[native code]
tick@http://localhost:8100/build/main.js:8235:45
_loadComponent@http://localhost:8100/build/main.js:8213:18
bootstrap@http://localhost:8100/build/main.js:8204:28
forEach@[native code]
_moduleDoBootstrap@http://localhost:8100/build/main.js:8106:49
http://localhost:8100/build/main.js:8074:45
onInvoke@http://localhost:8100/build/main.js:7385:43
run@http://localhost:8100/build/polyfills.js:3:10793
http://localhost:8100/build/polyfills.js:3:8892
invokeTask@http://localhost:8100/build/polyfills.js:3:14034
onInvokeTask@http://localhost:8100/build/main.js:7376:47
invokeTask@http://localhost:8100/build/polyfills.js:3:13977
runTask@http://localhost:8100/build/polyfills.js:3:11399
i@http://localhost:8100/build/polyfills.js:3:8013
u@http://localhost:8100/build/polyfills.js:2:7864
http://localhost:8100/build/polyfills.js:2:7988
r@http://localhost:8100/build/polyfills.js:2:6435
picture mbakker96

All 36 comments

Do you have an example of how you're using it?

mlynch picture mlynch on 13 Oct 2016

Here a short overview of my code. I've included the Storage also in my app.module.ts and installed the storage and SQLite plugins.

export class InformationPage {
     storage: SQLite;

     constructor() {
         this.storage = new SQLite();
         this.storage.openDatabase({
            'name':     'cw.db',
            'location': 'default',
        });
     }
}
mbakker96 picture mbakker96 on 14 Oct 2016

@mbakker96 hmm .. are you waiting for deviceready ?

ihadeed picture ihadeed on 14 Oct 2016
👍1

Nope still an error

this.platform.ready().then(() => {
      this.storage = new SQLite();
      this.storage.openDatabase({
           'name':     'cw.db',
            'location': 'default',
       });
 });
mbakker96 picture mbakker96 on 14 Oct 2016

@mbakker96 ok I'll try to reproduce this issue now..

ihadeed picture ihadeed on 14 Oct 2016

Wait a hour i found out that ionic just updated to RC1 i try to update after that i reply ;)

mbakker96 picture mbakker96 on 14 Oct 2016

Just tried it and it works well. Running RC0

image

export class MyApp {
  rootPage = TabsPage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();

      let db = new SQLite();
      db.openDatabase({
        name: 'data.db',
        location: 'default'
      }).then((db) => {
        console.log('DB initialized', db);
      }).catch(e => {
        console.error('Error initializing db', e);
      });

    });
  }
}
ihadeed picture ihadeed on 14 Oct 2016
👍1

I think it is a problem with the installation of SQLite. But I installed with the way it was describe in the documentation

mbakker96 picture mbakker96 on 14 Oct 2016

I created a fresh project, then ran ionic plugin add cordova-sqlite-storage and added the code I shared above.

ihadeed picture ihadeed on 14 Oct 2016

I'm using ionic-native version 2.0.3 by the way

mbakker96 picture mbakker96 on 14 Oct 2016

I used 2.2.3 in my project. But I don't think it makes a difference since we didn't update sqlite for awhile.

It's worth trying to delete the plugins folder and running ionic state restore ... make sure that you run ionic state save before that to save your plugins in package.json

ihadeed picture ihadeed on 14 Oct 2016

Can you explain more about that lost post?

It's worth trying to delete the plugins folder and running ionic state restore ... make sure that you run ionic state save before that to save your plugins in package.json

mbakker96 picture mbakker96 on 14 Oct 2016

@mbakker96 Run the following from your root directory

ionic state save
rm -rf plugins
ionic state restore
ihadeed picture ihadeed on 14 Oct 2016

I'm getting it also when i start with a blank page

mbakker96 picture mbakker96 on 14 Oct 2016 
ionic plugin add cordova-sqlite-storage
#added the db code in the app compoment constructor with platform ready
ionic serve -b -c
mbakker96 picture mbakker96 on 14 Oct 2016

Checkout my blank ionic app with SQLite here

mbakker96 picture mbakker96 on 14 Oct 2016

here is my pc information: 

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: Not installed
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.12.0
Xcode version: Xcode 8.0 Build version 8S162m
mbakker96 picture mbakker96 on 14 Oct 2016

@mbakker96 can you zip up your project directory and email it to me? [email protected]

mlynch picture mlynch on 14 Oct 2016

The plugin doesn't work in ionic serve...
You have to run it on a device or a simulator.

I think only the sqlite storage that's bundled with the ionic framework has
websql fallback. This plugin doesn't have any browser fallbacks, its native
only.

On Oct 14, 2016 9:37 AM, "Martijn Bakker" [email protected] wrote:

ionic plugin add cordova-sqlite-storage#added the db code in the app compoment constructor with platform ready
ionic serve -b -c

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic-native/issues/686#issuecomment-253800723,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ANJ8dNTSnDnbfgoX6HZ7yy8rk0_B5rBbks5qz4WCgaJpZM4KUsnu
.

ihadeed picture ihadeed on 15 Oct 2016

I think it would be a nice idea to modify the constructor and notify the
developer if the sqlitePlugin reference was not found.

Just like what we have with the google maps plugin at the moment.

On Oct 14, 2016 10:18 PM, "Ibrahim Hadeed" [email protected] wrote:

The plugin doesn't work in ionic serve...
You have to run it on a device or a simulator.

I think only the sqlite storage that's bundled with the ionic framework
has websql fallback. This plugin doesn't have any browser fallbacks, its
native only.

On Oct 14, 2016 9:37 AM, "Martijn Bakker" [email protected]
wrote:

ionic plugin add cordova-sqlite-storage#added the db code in the app compoment constructor with platform ready
ionic serve -b -c

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic-native/issues/686#issuecomment-253800723,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ANJ8dNTSnDnbfgoX6HZ7yy8rk0_B5rBbks5qz4WCgaJpZM4KUsnu
.

ihadeed picture ihadeed on 15 Oct 2016
👍1

That sounds logic. We are testing everything with ionic serve becease it is a fast work flow.

But now if i readed it correctly there is no way to make use of this plugin with ionic serve?

Martijn

mbakker96 picture mbakker96 on 15 Oct 2016

Someone just opened an issue by the ionic-app-scrips repo about this

https://github.com/driftyco/ionic-app-scripts/issues/177

mbakker96 picture mbakker96 on 16 Oct 2016

@mbakker96 did you see my comment above? Any chance you can share the project w/ me so I can help debug? It's a bit hard to do it remotely, and I haven't been able to reproduce, unfortunately.

mlynch picture mlynch on 16 Oct 2016

Okay, I might have figured this out. Can you see my comment here about verifying you have the correct script includes in www/index.html?

https://github.com/driftyco/ionic-native/issues/602#issuecomment-254024940

mlynch picture mlynch on 16 Oct 2016

Yeah you can try developing with livereload mode. That should be the
closest thing to ionic serve.

I think I'll be able to add a websql fallback. Its can easily be done since
this plugin is a drop in replacement for websql.

On Oct 15, 2016 5:34 PM, "Martijn Bakker" [email protected] wrote:

That sounds logic. We are testing everything with ionic serve becease it
is a fast work flow.

But now if i readed it correctly there is no way to make use of this
plugin with ionic serve?

Martijn

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic-native/issues/686#issuecomment-254012540,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ANJ8dMPxY6YM7R4Eh3-DVx5_DZMSk-JRks5q0UbjgaJpZM4KUsnu
.

ihadeed picture ihadeed on 16 Oct 2016

We should talk about how hard work because by we're setting a precedent of a web fallback in ionic native and I want to make sure we go into that with some discussion

mlynch picture mlynch on 16 Oct 2016

According to this page https://www.w3.org/TR/webdatabase/#databases the
only difference seems to be the static constructor (openDatabase). This is
also mentioned in the sqlite plugin's repo.

The constructor in our wrapper is already hardcoded. So in order to add the
websql fallback, we will only have to add a few more lines to the
openDatabase method.

I was also thinking to depreciate the instance method openDatabase in
favour of the static one.

On Oct 16, 2016 10:17 AM, "Max Lynch" [email protected] wrote:

We should talk about how hard work because by we're setting a precedent of
a web fallback in ionic native and I want to make sure we go into that with
some discussion

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic-native/issues/686#issuecomment-254049546,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ANJ8dBpYWVGzhINdKCMczvZ5_iJDRqbWks5q0jHjgaJpZM4KUsnu
.

ihadeed picture ihadeed on 16 Oct 2016

I was wondering how in general Ionic Native should work with ionic serve just earlier today.

mirkonasato picture mirkonasato on 16 Oct 2016

So, I just tested a project that @mbakker96 sent me with this issue. It worked once I did cordova plugin add cordova-sqlite-storage.

I think this issue might actually be related to a mixture of #708 where we're bypassing our plugin check logic, and the fact that sqlite isn't going to be available in ionic serve.

I'm closing for now as can't-reproduce but I think we can fix the other issues somehow.

mlynch picture mlynch on 17 Oct 2016

@mlynch I got the error with ionic serve. Becease I was thinking that the SQLite plugin had a fallback to WebSQL when you tested in the browser.

I think that the application will work fine when testing on a device.

mbakker96 picture mbakker96 on 18 Oct 2016

I followed the same procedure as mentioned in official docs and i am running it on an android device, but when i inspect it in chrome's device console i still get the reference error: sqlite plugin is not installed.

aishacharya picture aishacharya on 21 Oct 2016

Same as @aishacharya

ghost picture ghost on 24 Oct 2016

Me too.
Ionic 2.1.4, Cordova 6.3.1.

pimol picture pimol on 6 Nov 2016

Please remove your plugins and reinstall them. Also, _sqlite is not available in ionic serve_

mlynch picture mlynch on 7 Nov 2016

I have solved btw

ghost picture ghost on 7 Nov 2016

Thanks a lot @mosca90 !
Works fine!

gacalves picture gacalves on 28 Mar 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

JaneDawson picture JaneDawson  Â·  4Comments
lycwed picture lycwed  Â·  4Comments
icchio picture icchio  Â·  3Comments
mateo666 picture mateo666  Â·  3Comments
kyleap picture kyleap  Â·  4Comments