Import Platform from plugin got undefined



  • I use Platform from quasar plugin and I use :
    import { Platform } from ‘quasar’

    But if I call Platform.is.desktop always get undefined.

    How to use Platform outside Vue component correctly?

    thanks



  • Post your plugin code and how you are referencing it. Not sure why you would need it with Quasar though unless you need very detailed information Quasar already has built-in platform detection.



  • import jQuery from 'jquery'
    import { Platform, Notify } from 'quasar'
    
    let appdataDir = null
    
    jQuery.ajaxSetup({
      crossDomain: true,
      dataType: 'json',
      url: 'https://xxxxxx'
    })
    
    function readFile (fileEntry, cb) {
      fileEntry.file(function (file) {
        var reader = new FileReader()
        reader.onloadend = function () {
          cb(JSON.parse(this.result))
        }
        reader.readAsText(file)
      }, function () {
        cb(null)
      })
    }
    
    function getdataDirectory (cb) {
      if (appdataDir) {
        cb(appdataDir)
      } else {
        if (Platform.is.cordova) { /* ============> Platform is undefined here */
          window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function (dir) {
            appdataDir = dir
            cb(dir)
          }, function () {
            window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function (dir) {
              appdataDir = dir
              cb(dir)
            })
          })
        } else if (Platform.is.desktop) {
          window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem
          window.directoryEntry = window.directoryEntry || window.webkitDirectoryEntry
          window.requestFileSystem(Window.PERSISTENT, 0, function (fs) {
            appdataDir = fs.root
            cb(fs.root)
          })
        }
      }
    }
    
    function readfromFile (fileName, cb) {
      getdataDirectory(function (dirEntry) {
        dirEntry.getFile(fileName, {create: false, exclusive: false}, function (fileEntry) {
          readFile(fileEntry, function (data) {
            cb(data)
          })
        }, function () {
          cb(null)
        })
      })
    }
    
    function writeFile (fileEntry, dataObj) {
      // Create a FileWriter object for our FileEntry (log.txt).
      fileEntry.createWriter(function (fileWriter) {
        fileWriter.onerror = function (e) {
          console.log('Failed file write: ' + e.toString())
        }
        fileWriter.write(dataObj)
      })
    }
    function writetoFile (fileName, dataObj) {
      getdataDirectory(function (dirEntry) {
        dirEntry.getFile(fileName, {create: true, exclusive: false}, function (fileEntry) {
          writeFile(fileEntry, dataObj)
        }, function (FileError) {
          console.log('error writing file' + FileError)
        })
      })
    }
    
    function ajaxGet (params, cbSuccess, cacheName = '') {
      jQuery.ajax({
        method: 'GET',
        data: params
      })
        .done(function (result) {
          if (cacheName !== '') {
            writetoFile(cacheName, result)
          }
          cbSuccess(result)
        })
        .fail(function (jqXHR, textStatus) {
          Notify.create({
            color: 'negative',
            position: 'top',
            message: textStatus,
            icon: 'report_problem'
          })
        })
    }
    
    export default ({ Vue }) => {
      Vue.prototype.$ = jQuery
    
      Vue.prototype.appdataDir = function () {
        if (appdataDir) {
          return appdataDir
        } else {
          getdataDirectory(function (dirEntry) {
            return dirEntry
          })
        }
      }
    
      Vue.prototype.fileExists = function (fileName) {
        return new Promise((resolve, reject) => {
          getdataDirectory(function (dirEntry) {
            dirEntry.getFile(fileName, {create: false, exclusive: false},
              function (fileEntry) {
                resolve(true)
              },
              function () {
                resolve(false)
              }
            )
          })
        })
      }
    
      Vue.prototype.writetoFile = writetoFile
    
      Vue.prototype.$AjaxGet = function (params, cbSuccess, cacheName = '') {
        var cacheResult
        if (cacheName !== '') {
          readfromFile(cacheName, function (res) {
            cacheResult = res
            if (cacheResult) {
              cbSuccess(cacheResult)
            } else {
              ajaxGet(params, cbSuccess, cacheName)
            }
          })
        } else {
          ajaxGet(params, cbSuccess, cacheName)
        }
      }
    
      Vue.prototype.$findJson = function (list, field, key) {
        let result = null
        for (var item of list) {
          if (item[field] === key) {
            return item
          }
        }
        return result
      }
    
      Vue.prototype.$updateJson = function (list, field, key, newdata) {
        let result = list, index = 0
        for (var item of list) {
          if (item[field] === key) {
            let olddata = item
            let keys = Object.keys(newdata)
            keys.forEach(function (key, ind) {
              olddata[key] = newdata[key]
            })
            result[index] = olddata
            break
          }
          index++
        }
        return result
      }
    
      Vue.prototype.$deleteJson = function (list, field, key) {
        let result = list, index = 0
        for (var item of list) {
          if (item[field] === key) {
            result.splice(index, 1)
            break
          }
          index++
        }
        return result
      }
    
      Vue.prototype.$deleteallJson = function (list, field, key) {
        let result = list, index = 0
        for (var item of list) {
          if (item[field] === key) {
            result.splice(index, 1)
            index--
          }
          index++
        }
        return result
      }
    
      Vue.prototype.$maxJson = function (list, field) {
        let max = null, result = null
        for (var item of list) {
          if (item[field] > max) {
            max = item[field]
            result = item
          }
        }
        return result
      }
    
      Vue.prototype.$pagination = function (array, pageSize, pageNumber) {
        --pageNumber
        return array.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize)
      }
    }
    


  • Please you check in line with comment ============> Platform is undefined here

    But if I use Platform inside component using this.$q.platform.is.cordova, it’s OK



  • Wow - what a mess. What exactly are you trying to do? Are you calling this files ‘thisfileExists’ from a component somewhere and then it calls it’s own ‘getdataDirectory’? You may have a hoisting issue depending on how the functions are nested based on how you call them, but it’s hard to tell what exactly is doing what from what you posted. Can you provide a trimmed down version with only all of the pieces involved?