Cordova Plugin not working in Vuex files

tc

I am using cordova-plugin-secure-storage-echo for my mobile app.
I created a wrapper for the cordova plugin in ‘native/localstore.js’
In localstore.js is just a bunch of the cordova storage functions, for eg:

var ss = new cordova.plugins.SecureStorage(
    function() {
      console.log("Success");
    },
    function(error) {
      console.log("Error " + error);
    },
    "mystore"
);

async function saveData(key, val){
    return new Promise(function(resolve, reject) {
        ss.set(
                function(key) {
                    resolve(true)
                },
                function(error) {
                    reject('set error', error)
                },
                key,
                val
        )
    })
}
......
.....

I can import this file and use it at component with no problem, but since this a storage plugin, I would like to use it with vuex.
But when I import the file in vuex, it give me this error:
Uncaught TypeError: Cannot read property 'SecureStorage' of undefined
Seem the cordova plugin is not loaded before the Vuex did.
How can I solve this?
Thanks

dobbel

@tc

a bit hard to solve this one without more code.

tc

@dobbel
Created the module in scr/native/localstore.js for cordova-plugin-secure-storage-echo related actions:

var ss = new cordova.plugins.SecureStorage(
    function() {
      console.log("Success");
    },
    function(error) {
      console.log("Error " + error);
    },
    "mystore"
);

async function saveData(key, val){
    return new Promise(function(resolve, reject) {
        ss.set(
                function(key) {
                    resolve(true)
                },
                function(error) {
                    reject('set error', error)
                },
                key,
                val
        )
    })
}
async function getData(key){
    return new Promise(function(resolve, reject) {
        ss.get(
            function(value) {              
                resolve(value)
            },
            function(error) {
                reject(error)
            },
            key
        )
    })
}
export { saveData,getData, removeData}

So I gonna use it in my store/user module. In my store/user/state.js :

import { getData } from '../../native/sstore-echo'
let utoken = getData('usertoken').then(data =>{
        return data
    })
export default function () {
  return {
     token : utoken
  }
}

Then I will get this error Uncaught TypeError: Cannot read property 'SecureStorage' of undefined

However, when I use the Secure Storage in the components, it works without any error.

Hope this clarify out.

dobbel

@tc

when you do get the error? When you call the saveData/getData in in state.js?

could you post the output of (2x when it works and when it does not):

console.log(cordova)
console.log(cordova.plugins)
console.log(window.cordova)
console.log(window.cordova.plugins)

tc

@dobbel The complete error is :

localstore.js?f8cc:1 Uncaught TypeError: Cannot read property 'SecureStorage' of undefined
    at eval (localstore.js?f8cc:1)
    at Module../src/native/localstore.js (app.js:1208)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (state.js?b496:1)
    at Module../src/store/user/state.js (app.js:1304)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (index.js?7e21:1)
    at Module../src/store/user/index.js

So I put these console log in the top of localstore.js

console.log('cordova', cordova)
console.log('cordova plugin', cordova.plugins)
console.log('window cordova', window.cordova)
console.log('window cordova plugin', window.cordova.plugins)

And the results:

cordova {version: "8.1.0", platformVersion: "8.1.0", platformId: "android", define: ƒ, require: ƒ, …}
localstore.js?f8cc:2 cordova plugin undefined
localstore.js?f8cc:3 window cordova {version: "8.1.0", platformVersion: "8.1.0", platformId: "android", define: ƒ, require: ƒ, …}
localstore.js?f8cc:4 window cordova plugin undefined

Working console log:

cordova {version: "8.1.0", platformVersion: "8.1.0", platformId: "android", define: ƒ, require: ƒ, …}
localstore.js?f8cc:2 cordova plugin {SecureStorage: ƒ}
localstore.js?f8cc:3 window cordova {version: "8.1.0", platformVersion: "8.1.0", platformId: "android", define: ƒ, require: ƒ, …}
localstore.js?f8cc:4 window cordova plugin {SecureStorage: ƒ}

Seem it is not firing the cordova plugin.
Further checking on the browser console, I did see this:

deviceready has not fired after 5 seconds.
cordova.js:1226 Channel not fired: onPluginsReady
cordova.js:1226 Channel not fired: onCordovaReady

Don’t know what caused this.

dobbel

@tc

can you post the quasar info output. btw are you using IOS or android ?

metalsadman

@tc you can’t instantiate it after deviceready event says here https://github.com/mibrito707/cordova-plugin-secure-storage-echo#faq. what you could do is instantiate it somewhere like App.vue, and assign it to a vue prototype that you can use globally, make an empty one via boot as a placeholder for later.
https://quasar.dev/quasar-cli/developing-cordova-apps/cordova-plugins#Deviceready-Event

tc

@dobbel said in Cordova Plugin not working in Vuex files:

quasar info

Operating System - Linux(5.4.0-60-generic) - linux/x64
NodeJs - 12.18.3

Global packages
  NPM - 6.14.10
  yarn - 1.21.1
  @quasar/cli - 1.1.3
  @quasar/icongenie - Not installed
  cordova - 9.0.0

Important local packages
  quasar - 1.14.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 2.1.13 -- Quasar Framework local CLI
  @quasar/extras - 1.9.12 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 2.6.12 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.2.0 -- Official router for Vue.js 2
  vuex - 3.6.0 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.12.10 -- Babel compiler core.
  webpack - 4.44.2 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.11.0 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.1 -- Script for registering service worker, with hooks
  typescript - 3.9.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - 2.4.5 -- Capacitor: cross-platform mobile apps with the web
  @capacitor/cli - 2.4.5 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/android - 2.4.5 -- Capacitor: cross-platform mobile apps with the web
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - mypc
  wan1 - 192.168.0.107

tc

@metalsadman
I tried with boot file and also in App.vue to instantiate it. But still not working, the cordova plugin instance is not fired. I put this console.log('cordova plugin', cordova.plugins) into state.js, give me undefined.

Seem like Vuex loaded before cordova plugin??

dobbel

@tc

assign it to a vue prototype that you can use globally.

Did you try this?

tc

@dobbel Yes, I even added it to the window scope.
Problem more likely the priority of loading the plugin.
When the quasar start, it tend to loaded the vuex store before cordova plugin did, hence it will get undefined in state.js .

rizwan-ijaz

@tc You are correct about when quasar starts loading, it loads first vuex and then after that cordova plugin.
I have found a way to access cordova plugin inside vuex or boot file. Its not perfect but serves the purpose.

Below is the code sample to create “baseHttp” using Cordova Advanced HTTP and used exported baseHttp inside vuex actions.

tc

@rizwan-ijaz Hi, thanks for the advise, but I don’t quite understand what to do with your scripts here.
You mean you are using Cordova Advanced HTTP to make request instead of axios?
And what this have to do with the storage plugin?

rizwan-ijaz

@tc Hi,
Just like you are using storage plugin as I’m using advance HTTP plugin.
Cordova loads plugins after when device is ready. If you try to use plugin directly when app is booting then these plugins would not be available. So I used “deviceready” event to access http plugin and you can use the same event.

No More Posting New Topics!

Cordova Plugin not working in Vuex files