Compile error when running app with cordova after installing firebase plugins

Question

I followed this guide for installing Cordova and ReactJS: https://medium.com/@pshubham/using-react-with-cordova-f235de698cc3

This works!

However, when I want to use firebase with Cordova, as explained in this documentation: https://firebase.google.com/docs/auth/web/cordova, I am getting these errors after installing the plugins explained at step 6.

When I run "cordova run android", this is the output I am getting:

Successfully built!
<universal-links> tag is not set in the config.xml. Universal Links plugin is not going 
to work.
Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=C:\users\bosschertj\AppData\Local\Android\Sdk (recommended setting)
ANDROID_HOME=C:\Users\bosschertj\AppData\Local\Android\Sdk (DEPRECATED)
Subproject Path: CordovaLib
Subproject Path: app
> Task :app:preBuild UP-TO-DATE
> Task :CordovaLib:preBuild UP-TO-DATE
> Task :CordovaLib:preDebugBuild UP-TO-DATE
> Task :CordovaLib:checkDebugManifest UP-TO-DATE
> Task :CordovaLib:processDebugManifest UP-TO-DATE
> Task :app:preDebugBuild
> Task :CordovaLib:compileDebugAidl NO-SOURCE
> Task :app:compileDebugAidl NO-SOURCE
> Task :CordovaLib:packageDebugRenderscript NO-SOURCE
> Task :app:compileDebugRenderscript
> Task :app:checkDebugManifest UP-TO-DATE
> Task :app:generateDebugBuildConfig
> Task :app:prepareLintJar UP-TO-DATE
> Task :app:generateDebugSources
> Task :CordovaLib:compileDebugRenderscript UP-TO-DATE
> Task :CordovaLib:generateDebugBuildConfig UP-TO-DATE
> Task :CordovaLib:generateDebugResValues UP-TO-DATE
> Task :CordovaLib:generateDebugResources UP-TO-DATE
> Task :CordovaLib:packageDebugResources UP-TO-DATE
> Task :CordovaLib:generateDebugRFile UP-TO-DATE
> Task :CordovaLib:prepareLintJar UP-TO-DATE
> Task :CordovaLib:generateDebugSources UP-TO-DATE
> Task :CordovaLib:javaPreCompileDebug UP-TO-DATE
> Task :CordovaLib:compileDebugJavaWithJavac UP-TO-DATE
> Task :CordovaLib:processDebugJavaRes NO-SOURCE
> Task :CordovaLib:transformClassesAndResourcesWithPrepareIntermediateJarsForDebug UP-TO-DATE
> Task :app:javaPreCompileDebug
> Task :app:mainApkListPersistenceDebug UP-TO-DATE
> Task :app:generateDebugResValues UP-TO-DATE
> Task :app:generateDebugResources
> Task :app:mergeDebugResources
> Task :app:createDebugCompatibleScreenManifests
> Task :app:processDebugManifest UP-TO-DATE
> Task :app:processDebugResources

> Task :app:compileDebugJavaWithJavac FAILED
C:\Users\bosschertj\Documents\projects\lazymind\cordovaReactProject\platforms\android\app\src\main\java\com\google\cordova\plugin\BrowserTab.java:21: error: package android.support.customtabs does not exist
import android.support.customtabs.CustomTabsIntent;
                                 ^
C:\Users\bosschertj\Documents\projects\lazymind\cordovaReactProject\platforms\android\app\src\main\java\com\google\cordova\plugin\BrowserTab.java:104: error: package CustomTabsIntent does not exist
    Intent customTabsIntent = new CustomTabsIntent.Builder().build().intent;24 actionable tasks: 8 executed, 16 up-to-date

                                                  ^
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
2 errors

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 7s
C:\Users\bosschertj\Documents\projects\lazymind\cordovaReactProject\platforms\android\gradlew: Command failed with exit code 1 Error output:
C:\Users\bosschertj\Documents\projects\lazymind\cordovaReactProject\platforms\android\app\src\main\java\com\google\cordova\plugin\BrowserTab.java:21: error: package android.support.customtabs does not exist
import android.support.customtabs.CustomTabsIntent;
                                 ^
C:\Users\bosschertj\Documents\projects\lazymind\cordovaReactProject\platforms\android\app\src\main\java\com\google\cordova\plugin\BrowserTab.java:104: error: package CustomTabsIntent does not exist
    Intent customTabsIntent = new CustomTabsIntent.Builder().build().intent;
                                                  ^
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
2 errors

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 7s

Before installing the plugins, everything works just fine. what is wrong and how can I fix this?

EDIT: If you have a (better) tutoria on how to get Firebase authentication to work with ReactJS and Cordova, please share.

Answer 1

You can solve this issue by converting the cordova project to Android X. So Add these lines in config.xml under android.

 <preference name="AndroidXEnabled" value="true" />
 <preference name="GradlePluginKotlinEnabled" value="true" />
 <preference name="GradlePluginKotlinCodeStyle" value="official" />
 <preference name="GradlePluginKotlinVersion" value="1.3.50" />

Remove and add the android platform again.

And Change your import statement of BrowserTab.java file.

import android.support.customtabs.CustomTabsIntent;

to

import androidx.browser.customtabs.CustomTabsIntent;

the path of this file is ..

/platforms/android/app/src/main/java/com/google/cordova/plugin/BrowserTab.java