[React Native 0.73.1] Running the app on Android crashes: TypeError: Cannot read property 'configure' of null, js engine: hermes

[jayang102]

Describe the bug

After adding the latest Bugsnag dependency to my React Native project (0.73.1), I'm getting the following error from the Bugsnag files in node_modules:
TypeError: Cannot read property 'configure' of null, js engine: hermes from config.js (76.44)

• Commenting out Bugsnag.start() in index.js, the app runs as expected.

• I've followed all the steps in https://docs.bugsnag.com/platforms/react-native/react-native/ and followed up with the Manual Installation steps for Android to check if something was wrong https://docs.bugsnag.com/platforms/react-native/react-native/manual-setup/.

• iOS works without issues.

Steps to reproduce

1. Create a new React Native project (0.73.1)
2. Follow the Bugsnag installation steps for React Native
3. Run the React Native app on Android
4. See error

Environment

• Bugsnag version: 7.22.3
• Device (e.g. iphonex): Pixel 7 API 32 Emulator

Example code snippet

[aecorredor]

@jayang102 what was the resolution here? I'm running into exactly the same issue.

[joshuaben]

I dont know that this is resolved. Seeing the same issue on:
"@bugsnag/react-native": "^7.22.5"

also tried:
"@bugsnag/react-native": "^8.0.0-alpha.3"

current setup:

"dependencies": {
    "@apollo/client": "^3.9.4",
    "@bugsnag/react-native": "^7.22.5",
    "@react-native-async-storage/async-storage": "^1.21.0",
    "@react-native-community/slider": "^4.5.0",
    "@react-native-tvos/config-tv": "~0.0.4",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@react-navigation/stack": "^6.3.20",
    "@rudderstack/rudder-sdk-react-native": "^1.11.3",
    "date-fns": "^3.3.1",
    "expo": "^50.0.1",
    "expo-splash-screen": "~0.26.3",
    "expo-status-bar": "~1.11.1",
    "graphql": "^16.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "npm:react-native-tvos@^0.73.1-3",
    "react-native-device-info": "^10.12.0",
    "react-native-fast-image": "^8.6.3",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-markdown-display": "^7.0.2",
    "react-native-permissions": "^4.1.1",
    "react-native-qrcode-svg": "^6.3.0",
    "react-native-reanimated": "^3.6.2",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-screens": "^3.29.0",
    "react-native-size-matters": "^0.4.2",
    "react-native-svg": "^14.1.0",
    "react-native-video": "https://github.com/FrontRowXP/react-native-video.git"
  },

caveat: this is via a react-native-tvos build, but the error is exactly as described above.

getting:
ERROR TypeError: Cannot read property 'configure' of null, js engine: hermes

...and the screen displays just as in the initial screenshot above.

[mclack]

Hi @aecorredor and @joshuaben

After setting up a React Native 0.73 app with BugSnag, I am able to successfully build and run the app in a simulator.

However, we have noticed that some architectural changes in the Android layer for RN 0.73 means that the @bugsnag/react-native-cli will struggle to automatically configure BugSnag. We've added a task to update the CLI, but in the meantime you will need to follow the manual setup instructions for the Android layer instead: https://docs.bugsnag.com/platforms/react-native/react-native/manual-setup/#android

If you have followed all the manual setup steps for Android and are still experiencing this problem, can you please open a ticket with us directly by reaching out to [email protected], referencing this GitHub issue, and share your build.gradle files as well as your MainApplication file for our further investigation.

[aecorredor]

On my end, I ran into issues after having pulled from a branch that integrated bugsnag. I had to make sure to fully clean the RN project. That did the trick, making the error go away. Thanks!

[mclack]

We have now released a new version of the BugSnag React Native CLI, which is compatible with React Native 0.73: https://www.npmjs.com/package/@bugsnag/react-native-cli/v/7.22.6

For any users who are having issues when setting up a RN 0.73 project with BugSnag, please ensure you've referred to our automatic setup documentation: https://docs.bugsnag.com/platforms/react-native/react-native/#installation-and-configuration

[mysticek]

Im running on react-native: 0.72.5 and get same error - Cannot read property 'configure' of null from config.js.

I tried @bugsnag/react-native-cli (latest and 7.22.6 version) - same results
I tried manual install - same results

My build.gradle

buildscript {
    ext {
        buildToolsVersion = "34.0.0"
        minSdkVersion = 26
        compileSdkVersion = 34
        targetSdkVersion = 34
        ndkVersion = "23.1.7779620"
        kotlinVersion="1.8.0"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.bugsnag:bugsnag-android-gradle-plugin:7.+")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath 'com.google.gms:google-services:4.3.8'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        maven { url 'https://www.jitpack.io' }
        maven {
         url "https://maven.google.com" // by adding this
        }
        jcenter() {
            content {
                includeModule("com.eightbitlab", "blurview")
            }
        }
    }
}

my app/build.gradle

buildscript {
    repositories {
        gradlePluginPortal()
    }
    dependencies {
        classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[0.12.10, 0.99.99]'
    }
}

apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'
apply plugin: "com.android.application"
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

apply plugin: "com.facebook.react"

 react {
    
 }


def enableProguardInReleaseBuilds = false

def jscFlavor = 'org.webkit:android-jsc:+'

android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdkVersion rootProject.ext.compileSdkVersion

    dexOptions {
        javaMaxHeapSize "4g"
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_11
        targetCompatibility JavaVersion.VERSION_11
    }

    sourceSets {
        main {
            jniLibs.srcDirs = ['libs']
        }
    }

    namespace "random.sk.placeholder"
    defaultConfig {
        applicationId "random.sk.placeholder"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 214
        versionName "1.3.31"
        multiDexEnabled true
        missingDimensionStrategy 'react-native-camera', 'general'
    }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
            }
        }
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            signingConfig signingConfigs.release
            matchingFallbacks = ['release', 'debug']
        }
    }
}

dependencies {
    implementation(platform("org.jetbrains.kotlin:kotlin-bom:1.8.0"))
    implementation 'androidx.work:work-runtime:2.7.1'
    implementation("com.facebook.react:react-android")
    implementation("com.bugsnag:bugsnag-android-gradle-plugin:7.+")
    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
    implementation project(':react-native-safe-area-context')
    implementation project(':lottie-react-native')
    implementation project(':react-native-inappbrowser-reborn')
    implementation project(':react-native-onesignal')
    implementation project(':react-native-maps')
    implementation project(':react-native-svg')
    implementation project(':react-native-camera')
    implementation project(':react-native-share')
    implementation project(':react-native-device-info')
    implementation project(':react-native-linear-gradient')
    implementation project(':react-native-keychain')
    implementation project(':react-native-touch-id')
    implementation project(':react-native-vector-icons')
    implementation project(':react-native-gesture-handler')
    implementation project(':react-native-screens')
    implementation project(':react-native-config')
    implementation project(":react-native-get-random-values")
    implementation 'androidx.appcompat:appcompat:1.3.0'

    implementation 'com.madgag.spongycastle:bcpkix-jdk15on:1.58.0.0'
    implementation 'com.madgag.spongycastle:bcpg-jdk15on:1.58.0.0'

    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }


    implementation(files("libs/logger_release.aar"))
    implementation(files("libs/hce_sdk.aar"))

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

apply plugin: 'com.google.gms.google-services'
apply plugin: "com.bugsnag.android.gradle"
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

my MainApplication.java

package sk.placeholder;

import com.bugsnag.android.Bugsnag;
import android.app.Application;

import com.facebook.react.ReactApplication;
import com.reactnativeavoidsoftinput.AvoidSoftInputPackage;
import com.facebook.react.shell.MainReactPackage;
import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
import com.airbnb.android.react.lottie.LottiePackage;
import com.proyecto26.inappbrowser.RNInAppBrowserPackage;
import com.geektime.rnonesignalandroid.ReactNativeOneSignalPackage;
import com.airbnb.android.react.maps.MapsPackage;
import com.horcrux.svg.SvgPackage;
import org.reactnative.camera.RNCameraPackage;
import cl.json.RNSharePackage;
import cl.json.ShareApplication;
import com.learnium.RNDeviceInfo.RNDeviceInfo;
import com.BV.LinearGradient.LinearGradientPackage;
import com.oblador.keychain.KeychainPackage;
import com.rnfingerprint.FingerprintAuthPackage;
import com.reactnativecommunity.blurview.BlurViewPackage;
import com.oblador.vectoricons.VectorIconsPackage;
import com.swmansion.gesturehandler.RNGestureHandlerPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactNativeHost;
import com.facebook.soloader.SoLoader;
import com.reactnativecommunity.netinfo.NetInfoPackage;
import java.util.List;
import java.util.Arrays;
import com.reactnativecommunity.picker.RNCPickerPackage;
import com.reactnativecommunity.webview.RNCWebViewPackage;
import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
import com.swmansion.rnscreens.RNScreensPackage;
import com.reactnativecommunity.geolocation.GeolocationPackage;
import com.reactcommunity.rndatetimepicker.RNDateTimePickerPackage;
import com.lugg.RNCConfig.RNCConfigPackage;
import org.linusu.RNGetRandomValuesPackage;

public class MainApplication extends Application implements ShareApplication, ReactApplication {

  private final ReactNativeHost mReactNativeHost = new DefaultReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new AvoidSoftInputPackage(),
            new MapsPackage(),
            new SafeAreaContextPackage(),
            new LottiePackage(),
            new RNInAppBrowserPackage(),
            new ReactNativeOneSignalPackage(),
            new SvgPackage(),
            new RNCameraPackage(),
            new RNSharePackage(),
            new RNDeviceInfo(),
            new LinearGradientPackage(),
            new KeychainPackage(),
            new FingerprintAuthPackage(),
            new BlurViewPackage(),
            new VectorIconsPackage(),
            new RNGestureHandlerPackage(),
            new PaymentPackage(),
            new RNCPickerPackage(),
            new RNCWebViewPackage(),
            new NetInfoPackage(),
            new AsyncStoragePackage(),
            new RNScreensPackage(),
            new GeolocationPackage(),
            new RNDateTimePickerPackage(),
            new RNCConfigPackage(),
            new RNGetRandomValuesPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }

    @Override
    protected boolean isNewArchEnabled() {
        return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
    }

    @Override
    protected Boolean isHermesEnabled() {
        return BuildConfig.IS_HERMES_ENABLED;
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      // If you opted-in for the New Architecture, we load the native entry point for this app.
      DefaultNewArchitectureEntryPoint.load();
    }
    ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
    Bugsnag.start(this);
  }

  @Override
  public String getFileProviderAuthority() {
    return BuildConfig.APPLICATION_ID + ".provider";
  }
}

[clr182]

Hi @mysticek

Can you please confirm that Bugsnag.start() is correctly executed in your JavaScript entry point (usually index.js), as per our documentation: https://docs.bugsnag.com/platforms/react-native/react-native/manual-setup/#javascript

[mysticek]

Hi @mysticek

Can you please confirm that Bugsnag.start() is correctly executed in your JavaScript entry point (usually index.js), as per our documentation: https://docs.bugsnag.com/platforms/react-native/react-native/manual-setup/#javascript

Thank you for response.

Of course, here is my index.js file:

import Bugsnag from '@bugsnag/react-native';
Bugsnag.start();

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import 'react-native-get-random-values';

AppRegistry.registerComponent(appName, () => App);

[clr182]

Hi @mysticek

Thank you for sharing this additional info.

For our further investigation could you please share a link to a reproduction application?