bug: Ionic 4 + Vue.js: Blank screen on Android 5.1 and Android 6.0

Bug Report

Ionic version: [x] @ionic/core 4.11.3 [x] @ionic/vue 0.0.4

Current behavior: Exceptions occur on Android 5.1 as well as on Android 6.0 since @ionic/core 4.6.0

Android 5.1: “Uncaught TypeError: undefined is not a function”, source: webpack-internal:///./node_modules/@ionic/core/dist/esm-es5/css-shim-206ea950-3169f23e.js (496) Android 6.0: “Uncaught TypeError: Array.from is not a function”, source: webpack-internal:///./node_modules/@ionic/core/dist/esm-es5/css-shim-206ea950-3169f23e.js (496)

Expected behavior: Running application without exceptions and blank screen. Support for Android 5.1 and 6.0.

Other information: We think it’s important to support Android 5.1 and 6.0 since many specialized Android devices (e.g. POS) are based on these OS versions.

Steps to reproduce:

vue create ionic-core-issue
cd ionic-core-issue
vue add router
npm install @ionic/vue
npm install @ionic/core
npm install ionicons@4.5.9-1 --save-dev
vue add cordova // Please select platform Android

Please add the following code block to main.js

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
Vue.use(Ionic);

Buld the app and run on Android 5.1

Related code:

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

package.json

{
  "name": "ionic-core-issue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "cordova-build-android": "cross-env CORDOVA_PLATFORM=android vue-cli-service cordova-build-android",
    "cordova-build-browser": "cross-env CORDOVA_PLATFORM=browser vue-cli-service cordova-build-browser",
    "cordova-build-ios": "cross-env CORDOVA_PLATFORM=ios vue-cli-service cordova-build-ios",
    "cordova-build-only-www-android": "cross-env CORDOVA_PLATFORM=android vue-cli-service cordova-build-only-www-android",
    "cordova-build-only-www-browser": "cross-env CORDOVA_PLATFORM=browser vue-cli-service cordova-build-only-www-browser",
    "cordova-build-only-www-ios": "cross-env CORDOVA_PLATFORM=ios vue-cli-service cordova-build-only-www-ios",
    "cordova-build-only-www-osx": "cross-env CORDOVA_PLATFORM=osx vue-cli-service cordova-build-only-www-osx",
    "cordova-build-osx": "cross-env CORDOVA_PLATFORM=osx vue-cli-service cordova-build-osx",
    "cordova-prepare": "vue-cli-service cordova-prepare",
    "cordova-serve-android": "cross-env CORDOVA_PLATFORM=android vue-cli-service cordova-serve-android",
    "cordova-serve-browser": "cross-env CORDOVA_PLATFORM=browser vue-cli-service cordova-serve-browser",
    "cordova-serve-ios": "cross-env CORDOVA_PLATFORM=ios vue-cli-service cordova-serve-ios",
    "cordova-serve-osx": "cross-env CORDOVA_PLATFORM=osx vue-cli-service cordova-serve-osx"
  },
  "dependencies": {
    "@ionic/core": "^4.11.3",
    "@ionic/vue": "0.0.4",
    "core-js": "^3.3.2",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-eslint": "^4.0.0",
    "@vue/cli-plugin-router": "^4.0.5",
    "@vue/cli-service": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "ionicons": "^4.5.9-1",
    "vue-cli-plugin-cordova": "^2.3.6",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

Ionic info:

Ionic:

   Ionic CLI : 5.4.2

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   NodeJS : v10.16.2
   npm    : 6.9.0
   OS     : Windows 10

Vue info:

Environment Info:

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 10.16.2 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.387.0
  npmPackages:
    @ionic/vue: 0.0.4 => 0.0.4
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  4.0.5
    @vue/babel-preset-jsx:  1.1.1
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.1.1
    @vue/babel-sugar-v-on:  1.1.0
    @vue/cli-overlay:  4.0.5
    @vue/cli-plugin-babel: ^4.0.0 => 4.0.5
    @vue/cli-plugin-eslint: ^4.0.0 => 4.0.5
    @vue/cli-plugin-router: ^4.0.5 => 4.0.5
    @vue/cli-plugin-vuex:  4.0.5
    @vue/cli-service: ^4.0.0 => 4.0.5
    @vue/cli-shared-utils:  4.0.5 (3.12.1)
    @vue/component-compiler-utils:  3.0.0
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3
    vue: ^2.6.10 => 2.6.10
    vue-cli-plugin-cordova: ^2.3.6 => 2.3.6
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.7.1
    vue-router: ^3.1.3 => 3.1.3
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

[shoutershub]

Till date, no solution, this is so sad.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.