Object.entries error when running Cordova app on Android device



  • Hi there,
    I have a Quasar (v16) Cordova app that runs fine on my Android phone unless I install the Crosswalk plugin to support older Android versions. The Crosswalk plugin is no longer supported so isn’t as up-to-date as the new Chrome version on my phone. When I run it with the Crosswalk plugin, I get the following error in the console and the app just shows a white screen.

    Uncaught TypeError: Object.entries is not a function
    

    Since Object.entries is a newer feature of javascript I’m not surprised Crosswalk doesn’t support it. What I’m confused about is that I thought Quasar used Babel to compile newer Javascript down to ES5 syntax so I wouldn’t expect to see this error at all since Object.entries should have been transpiled to ES5 code. Everything seems to be setup properly in my project. Here’s by .babelrc file:

    {
      "presets": [
        [ "env", {"modules": false} ],
        "stage-2"
      ],
      "plugins": ["transform-runtime"],
      "comments": false
    }
    

    I also tried adding babel-polyfill using a Quasar plugin which still didn’t work. I’m not sure if this is the correct approach but here’s my plugin code:

    import 'babel-polyfill';
    
    export default () => {
    }
    

    Any thoughts would be appreciated. Here’s my “quasar info” if it’s helpful:

    Operating System                Darwin(17.5.0) - darwin/x64
    NodeJs                          8.11.1
    
    Global packages
      NPM                           6.1.0
      yarn                          Not available
      quasar-cli                    0.15.14
      vue-cli                       2.9.6
      cordova                       8.0.0
    
    Important local packages
      quasar-cli                    0.15.14 (Quasar Framework CLI)
      quasar-framework              0.16.0  (Build responsive websites, PWAs, hybrid mobile apps and Electron apps, all simultaneously using same codebase)
      quasar-extras                 1.0.2   (Quasar Framework fonts, icons and i18n.)
      vue                           2.5.16  (Reactive, component-oriented view layer for modern web interfaces.)
      vue-router                    3.0.1   (Official router for Vue.js 2)
      vuex                          3.0.1   (state management for Vue.js)
      electron                      Not available
      babel-core                    6.26.0  (Babel compiler core.)
      webpack                       3.11.0  (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            2.11.1  (Serves a webpack app. Updates the browser on changes.)
    

    Thanks,
    Jason


  • Admin

    Hi,

    1. Quasar DOES use Babel.
    2. Object.entries has nothing to do with Babel.
    3. Not all browsers support Object.entries, so you need a polyfill for those that don’t. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries


  • Okay, any suggestions on how to add the babel-polyfill? Am I on the right track with the plugin syntax I quoted?


  • Admin

    The link I gave you has the polyfill you need. Add an app plugin with it and place it as first in the queue


  • Admin

    For babel polyfill, just tamper with the .babelrc – mind that for v0.16+ u’re on Babel 7, not 6