Capacitor Android pipeline building but no longer working

Issue

I had a working React app released for Android and iOS via Capacitor. But now with a new version of my app, builds were not working with the Pixel 4 API 29 virtual device I used previously. Retrying with a Pixel 2 API 28 builds complete and the app opens, but now Mapbox is no longer loading and that is the core of my app. I updated to Android Studio 4.2.1 and have the following as dev dependencies in my package.json:

“@capacitor/android”: “^3.0.2”,
“@capacitor/cli”: “^3.0.2”,
“@capacitor/core”: “^3.0.2”,
“capacitor-resources”: “^2.0.5”,
“cordova-res”: “^0.15.3”

Small elements of my app are accessing the web, so it doesn’t seem to be an internet access issue. The main changes I’ve made in this version are upgrading to Mapbox 2.3.0 and making basic use of cookies for user settings, but not for ad tracking. But I’ve reverted both of these changes and the problem is persisting so it doesn’t seem to be because of the new Mapbox version or because the introduction of cookies.

Getting errors like this where the last letter of the app name is missing for some reason:

E/o.ionic.ecorat: Invalid ID 0x00000000.
Invalid ID 0x00000000.
E/o.ionic.ecorat: Invalid ID 0x00000000.

Also errors like this:

E/cr_VariationsUtils: Failed reading seed file “/data/user/0/io.ionic.ecorate/app_webview/variations_seed”: /data/user/0/io.ionic.ecorate/app_webview/variations_seed (No such file or directory)

Do errors like this mean that the app isn’t detecting that it’s meant for prod?

E/Capacitor/Console: File: http://localhost/static/js/2.9b5092bb.chunk.js - Line 2 - Msg: Error: Failed to initialize WebGL
E/Capacitor/Console: File: http://localhost/static/js/2.9b5092bb.chunk.js - Line 2 - Msg: Uncaught (in promise) Error: Failed to initialize WebGL.

I use ternary operators that start like this:

const url = process.env.NODE_ENV === ‘production’ ?

to decide whether to go to the real website or use localhost.

Should I go back to a more stable version of capacitor?

Solution

There are 3 things I can suggest which worked for me..

1. Check the devtool and inspect the emulator. if you see a error something like this

Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH

Then you can use npx capacitor run which should solve the issue, this is a quick fix though.

2. Replace your dev-flow and start using npx instead of ionic XXXX commands.

3. If you wish to update the deps and dev-deps in that case, based on package.json you have shared in your question you are missing a few plugins. if you were to create a new ionic app using ionic start then the package.json will look something like this [ignore the vue deps]

 "dependencies": {
    "@capacitor/android": "3.0.2",
    "@capacitor/app": "1.0.2",
    "@capacitor/core": "3.0.2",
    "@capacitor/haptics": "1.0.2",
    "@capacitor/keyboard": "1.0.2",
    "@capacitor/status-bar": "1.0.2",
    "@ionic/vue": "^5.4.0",
    "@ionic/vue-router": "^5.4.0",
    "core-js": "^3.6.5",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0"
  }

So, you will need to manually install the package apart from @capacitor/android & @capacitor/core I believe these packages that are de-coupled packages that makes capacitor lighter than the prev version and need to be manually installed.

After that you need to build using ionic build then use ionic open to open the IDE and sync the project with Gradle for the android app. Once this is done you can use ionic capacitor run --livereload --external to open the emulator and the dev server with live-reload..

Answered By - Nishant S Vispute