Common React Native errors

We’ve put together a quick checklist to help teams troubleshoot the most common causes for build failures.

Here’s what you can to do quickly diagnose and likely resolve build errors:

See Troubleshooting Errors for coverage of specific errors.

Clone your repo and check if your app builds locally

It’s important to make sure there are no discrepancies between your remote branch and local git state.

Buddybuild creates a fresh clone of your code and executes build commands on every commit.

Here’s how to replicate this process and ensure your remote branch is up to date:

  • Clone your repo into a new location / folder on your machine

  • Make sure that the node version installed on your machine is what’s being used on buddybuild

  • Do a fresh npm install and attempt to build your app

Double check your third party dependencies

Node

  • Make sure that the node version you are using locally is the same as what’s being used to build the branch you’re having issues with.

  • A frequently seen issue is a package.json that specifies non-explicit versions of package dependencies (i.e. using carets ^ and tildes ~). This might result in failed builds because different versions of dependencies are being installed on buddybuild than what is being used on your local machine. Our recommendation is to either remove these characters or to move to using yarn, which has a corresponding yarn.lock that specifies the exact versions you’re using locally.

Gradle

Bear in mind that even if you have your npm dependencies locked down, those npm dependencies might have Gradle files that use wildcards to reference their dependencies.

Those dependency versions are NOT locked down and might result in issues when building on buddybuild.

For example:

Wildcard Dependency
compile('com.facebook.android:facebook-android-sdk:4.+')

Make sure your app is configured to generate an offline bundle

An offline bundle is required for CI systems to pack the relevant Javascript code into your app, as there’s no development server around to share javascript code.

For Android, you will notice at the top of your app/build.gradle file a commented auto-generated block that indicates how to generate an offline bundle for a given variant. By default, offline bundles are disabled for debug/development variants.

The code below provides an example as to how to generate an offline bundle for a debug variant.

project.ext.react = [
        // whether to bundle JavaScript and assets in staging mode
        bundleInDebug: true,
        jsBundleDirDebug: "$buildDir/intermediates/assets/debug"
]

apply from: "../../node_modules/react-native/react.gradle"

Troubleshooting Errors

Unable to resolve module <module name> from <path>: Module does not exist in the module map or in these directories:

We’ve found that this error is generally caused by using wildcards (^ or ~) in your package.json.

Our recommendation is to either remove the wildcards, or to move to using yarn and committing your yarn.lock.

Could not get BatchedBridge, make sure your bundle is packaged properly

This indicates that your app is not correctly configured to generate offline bundles, which is required for apps generated using continuous integration systems like buddybuild.

Look to Make sure your app is configured to generate an offline bundle as to how to configure your app to resolve this.

error: package <name> does not exist

This is generally caused by two different issues.

  1. Your settings.gradle path references to React Native modules might be invalid.

  2. You’ve upgraded to a buildToolsVersion that one of your React Native dependencies does not support. For example, if you were to upgrade to buildToolsVersion 25.0.0, that mandates that all your application’s dependencies must also be at least at that buildToolsVersion. If a dependency does not satisfy that requirement, gradle will silently ignore the dependency and you’ll get import errors.

    This can be fixed by adding something like this to your root level build.gradle file:

    subprojects {
      ext {
        buildTools = "25.0.1"
      }
      afterEvaluate { project ->
        println project.name
        if (project.name.indexOf('react-native-code-push') > -1 && project.hasProperty("android")) {
          android {
            buildToolsVersion buildTools
          }
        }
      }
    }

fatal error: React/RCTViewManager.h file not found

This generally indicates that you are using a buddybuild-generated scheme that is not correctly adding libReact.a as a target dependency.

In these instances, we recommend that you share your scheme and configure your app to use your shared scheme rather than buddybuild’s generated scheme. See Missing schemes for details.

error: FBSDKShareKit/FBSDKShareKit.h file not found

This is generally a result of an incorrectly configured repository with regards to the location of FBSDK dependencies.

You will notice that RCTFBSDK will look for dependencies in one of two locations:

  • ~/Documents/FacebookSDK

  • $(PROJECT_DIR)/../../../ios/Frameworks

The second option is the correct option for continuous integration systems like buddybuild.

In other words, you MUST place your FBSDK dependencies under the "ios/Frameworks" folder in order for it to work on a continuous integration system.

React Native packager is stalling during an Android build

If you’re stuck at "mergeReleaseResources" or "bundleReleaseJsAndAssets", one reason we’ve found this to be the case is that there are realm auxiliary artifacts lying around in one of your directories that the React Native package is attempting to traverse/parse.

In particular default.realm.* files or a realm-object-server directory. More often that not, we’ve found these artifacts to be generated by some test framework (i.e. jest). https://realm.io/docs/objc/latest/#auxiliary-realm-files

/node_modules/react-native-fbsdk/android/build/intermediates/res/merged/release/values-v24/values-v24.xml:3: AAPT: Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Borderless.Colored'.

This generally is a result of version mismatches. The react-native-fbsdk node module uses wildcards in its gradle file to reference its facebook-android-sdk version dependency, and depending on the version picked up, it can cause failures.

compile('com.facebook.android:facebook-android-sdk:4.+')

The following Stack Overflow article explains the issue and resolutions in more detail:

/node_modules/react-native-root-siblings/lib/AppRegistryInjection.js: Module does not exist in the module map

This error indicate that there is an incompatibility between one of your dependencies and the version of React Native set in your package.json file. For this specific error, react-native version 0.48 (or higher) is required.

error: method does not override or implement a method from a supertype

If you have upgraded to React Native 0.48 (or higher) and start seeing these errors, it means that one of your dependencies set in your package.json file is incompatible with that version of React Native and needs to be updated.

results matching ""

    No results matching ""