Capacitor 5 - Android do not render app

Capacitor
1

After migrating to Capacitor 4 and then Capacitor 5, for targeting Android 33, I ran into a problem. The app is working fine on web/localhost and on IOS. On Android it opens with no errors but stays blank without loading app code to webview.

I’ve been searching for people with similar problems without any luck. Now I’m on the second day trying to solve this and really frustrated.

I’m using Ionic Vue without TypeScript.

Ionic:

   Ionic CLI       : 7.1.1 (c:\Users\holst\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/vue 5.9.4

Capacitor:

   Capacitor CLI      : 5.4.0
   @capacitor/android : 5.4.0
   @capacitor/core    : 5.4.0
   @capacitor/ios     : 5.4.0

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.2

System:

   NodeJS : v16.20.2 (C:\Program Files\nodejs\node.exe)
   npm    : 8.0.0
   OS     : Windows 10

package.json

{
  "name": "app",
  "version": "1",
  "private": true,
  "description": "desc",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
    "resources": "cordova-res --skip-config --copy --icon-background-source '#FFFFFF'"
  },
  "dependencies": {
    "@capacitor/android": "^5.0.0",
    "@capacitor/app": "^5.0.0",
    "@capacitor/app-launcher": "^5.0.0",
    "@capacitor/camera": "^5.0.0",
    "@capacitor/core": "^5.0.0",
    "@capacitor/device": "^5.0.0",
    "@capacitor/dialog": "^5.0.0",
    "@capacitor/filesystem": "^5.0.0",
    "@capacitor/geolocation": "^5.0.0",
    "@capacitor/haptics": "^5.0.0",
    "@capacitor/ios": "^5.0.0",
    "@capacitor/keyboard": "^5.0.0",
    "@capacitor/local-notifications": "^5.0.0",
    "@capacitor/preferences": "^5.0.0",
    "@capacitor/share": "^5.0.0",
    "@capacitor/splash-screen": "^5.0.0",
    "@capacitor/status-bar": "^5.0.0",
    "@ionic/vue": "^5.9.4",
    "@ionic/vue-router": "^5.9.4",
    "@maplibre/maplibre-gl-leaflet": "^0.0.15",
    "@panzoom/panzoom": "^4.4.1",
    "animate.css": "^4.1.1",
    "axios": "^0.21.1",
    "capacitor-plugin-safe-area": "^2.0.0",
    "capacitor-resources": "^2.0.5",
    "chart.js": "^2.9.3",
    "core-js": "^3.6.5",
    "ionicons": "^5.2.3",
    "leaflet": "^1.9.4",
    "moment": "^2.29.1",
    "onesignal-cordova-plugin": "^3.0.2",
    "sharp": "^0.28.3",
    "vue": "^3.3.4",
    "vue-i18n": "9.2.2",
    "vue-router": "^4.2.4",
    "vue3-tour": "^0.2.0",
    "vueperslides": "^3.3.0",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@capacitor/cli": "^5.4.0",
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0",
    "vue-loader-v16": "^16.0.0-beta.5.4"
  }
}
2

Have you checked DevTools in Chrome to see if there are any JS errors? You can access DevTools for your app running on Android here - chrome://inspect/#devices.

3

One simple thing that had to change. I had to change “webDir”: “public” to “dist” in capacitor config.

1 Like