Import Platform from plugin got undefined

[wahono]

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

[genyded]

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.

[wahono]

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)
  }
}

[wahono]

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

[genyded]

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?