Object.entries error when running Cordova app on Android device

jasonl

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

rstoenescu

Hi,

Quasar DOES use Babel.
Object.entries has nothing to do with Babel.
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

jasonl

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

rstoenescu

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

rstoenescu

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

No More Posting New Topics!

Object.entries error when running Cordova app on Android device