Ionic 6 . When I add firebasex plugin. Ionic-native/http stops working

Question

I was using FCM plugin earlier. But it stopped working on Android 11. So thought of switching to firebasex plugin. But as soon as I add it to my project. ionic-native/http stops working.

Ionic Info :

Ionic:

   Ionic CLI                     : 6.16.3
   Ionic Framework               : @ionic/angular 4.11.13
   @angular-devkit/build-angular : 0.803.29
   @angular-devkit/schematics    : 8.3.29
   @angular/cli                  : 8.3.29
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 10.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 25 other plugins)

Utility:

   cordova-res                          : 0.15.3
   native-run (update available: 1.4.1) : 1.2.2

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v12.19.0
   npm               : 6.14.9
   OS                : Linux 5.4

Plugin List :

      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-file": {},
      "cordova-plugin-filechooser": {},
      "cordova-plugin-filepath": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "AIzaSyCiIDP1JCs8RFSWAHwYZpFbhsbC9MyoUCI",
        "API_KEY_FOR_IOS": "AIzaSyCiIDP1JCs8RFSWAHwYZpFbhsbC9MyoUCI",
        "PLAY_SERVICES_VERSION": "15.0.1",
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-nativegeocoder": {},
      "phonegap-plugin-barcodescanner": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-unique-device-id2": {},
      "cordova-plugin-advanced-http": {
        "OKHTTP_VERSION": "3.10.0"
      },
      "com-badrit-base64": {},
      "cordova-plugin-androidx": {},
      "cordova-plugin-androidx-adapter": {},
      "cordova-support-google-services": {},
      "cordova-plugin-local-notification": {},
      "cordova-plugin-dialogs": {},
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-geolocation": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-enable-multidex": {},
      "cordova-plugin-firebasex": {
        "FIREBASE_ANALYTICS_COLLECTION_ENABLED": "true",
        "FIREBASE_PERFORMANCE_COLLECTION_ENABLED": "true",
        "FIREBASE_CRASHLYTICS_COLLECTION_ENABLED": "true",
        "ANDROID_ICON_ACCENT": "#FF00FFFF",
        "ANDROID_FIREBASE_PERFORMANCE_MONITORING": "false",
        "ANDROID_PLAY_SERVICES_TAGMANAGER_VERSION": "17.0.0",
        "ANDROID_PLAY_SERVICES_AUTH_VERSION": "19.0.0",
        "ANDROID_FIREBASE_ANALYTICS_VERSION": "19.0.0",
        "ANDROID_FIREBASE_MESSAGING_VERSION": "22.0.0",
        "ANDROID_FIREBASE_CONFIG_VERSION": "21.0.0",
        "ANDROID_FIREBASE_PERF_VERSION": "20.0.2",
        "ANDROID_FIREBASE_AUTH_VERSION": "21.0.1",
        "ANDROID_FIREBASE_INAPPMESSAGING_VERSION": "20.0.0",
        "ANDROID_FIREBASE_FIRESTORE_VERSION": "23.0.2",
        "ANDROID_FIREBASE_FUNCTIONS_VERSION": "20.0.0",
        "ANDROID_FIREBASE_IID_VERSION": "21.1.0",
        "ANDROID_FIREBASE_INSTALLATIONS_VERSION": "17.0.0",
        "ANDROID_FIREBASE_CRASHLYTICS_VERSION": "18.1.0",
        "ANDROID_FIREBASE_CRASHLYTICS_NDK_VERSION": "18.1.0",
        "ANDROID_GSON_VERSION": "2.8.7",
        "ANDROID_FIREBASE_PERF_GRADLE_PLUGIN_VERSION": "1.4.0"
    

App works perfectly until I run the command npm install @ionic-native/firebase-x --save . Then execution of code stops as soon as a http call happens. No error except for the timeout error is thrown, I have gone the logs of the server calls aren't not hitting it.

Answer 1

Ionic Native Plugin Firebase X has conflict issues with Ionic Native HTTP because of OKHTTP Version.

There are two possible solutions here. First is by locking the version by adding the following to the config.xml:

<preference name="AndroidXEnabled" value="true" />
<preference name="OKHTTP_VERSION" value="3.12.1" />

Or you remove both plugin and re-add it with the OKHTTP specific variable:

ionic cordova plugin add cordova-plugin-firebasex --variable OKHTTP_VERSION=3.12
ionic cordova plugin add cordova-plugin-advanced-http --variable OKHTTP_VERSION=3.12