Android: Crash after Requesting Bundle

[LiamInJapan]

Description

I am following the guide here to integrate React Native with a pre-existing app.

I am doing this via a normal native button. I press this and I execute the setup code in the article.

I see a spinner on the screen and it informs me that the app is "fetching JS bundle".

Output in the command line bundler also confirms this:
[11/14/2016, 4:54:42 PM] Requesting bundle url: /index.android.bundle?platform=android&dev=true&hot=false (327ms)

Unfortunately I then get a crash with the following logcat output:

W/unknown:React(13970): You seem to be running on device. Run 'adb reverse tcp:8081 tcp:8081' to forward the debug server's port to the device. E/AndroidRuntime(13970): FATAL EXCEPTION: AsyncTask #3 E/AndroidRuntime(13970): Process: com.xxxxxxxx, PID: 13970 E/AndroidRuntime(13970): java.lang.RuntimeException: An error occured while executing doInBackground() E/AndroidRuntime(13970): at android.os.AsyncTask$3.done(AsyncTask.java:304) E/AndroidRuntime(13970): at java.util.concurrent.FutureTask.finishCompletion(FutureTask.java:355) E/AndroidRuntime(13970): at java.util.concurrent.FutureTask.setException(FutureTask.java:222) E/AndroidRuntime(13970): at java.util.concurrent.FutureTask.run(FutureTask.java:242) E/AndroidRuntime(13970): at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:231) E/AndroidRuntime(13970): at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1112) E/AndroidRuntime(13970): at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:587) E/AndroidRuntime(13970): at java.lang.Thread.run(Thread.java:818) E/AndroidRuntime(13970): Caused by: java.lang.IllegalAccessError: Method 'void android.support.v4.net.ConnectivityManagerCompat.<init>()' is inaccessible to class 'com.facebook.react.modules.netinfo.NetInfoModule' (declaration of 'com.facebook.react.modules.netinfo.NetInfoModule' appears in /data/data/com.xxxx/files/instant-run/dex/slice-com.facebook.react-react-native-0.20.1_b45e38dcf4b17e67a28c8f304d2b842bb0467fc3-classes.dex) E/AndroidRuntime(13970): at com.facebook.react.modules.netinfo.NetInfoModule.<init>(NetInfoModule.java:55) E/AndroidRuntime(13970): at com.facebook.react.shell.MainReactPackage.createNativeModules(MainReactPackage.java:67) E/AndroidRuntime(13970): at com.facebook.react.ReactInstanceManagerImpl.processPackage(ReactInstanceManagerImpl.java:793) E/AndroidRuntime(13970): at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:730) E/AndroidRuntime(13970): at com.facebook.react.ReactInstanceManagerImpl.access$600(ReactInstanceManagerImpl.java:91) E/AndroidRuntime(13970): at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:184) E/AndroidRuntime(13970): at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:169) E/AndroidRuntime(13970): at android.os.AsyncTask$2.call(AsyncTask.java:292) E/AndroidRuntime(13970): at java.util.concurrent.FutureTask.run(FutureTask.java:237) E/AndroidRuntime(13970): ... 4 more W/ActivityManager( 523): Force finishing activity 1 com.xxxx/com.xxxxxxx.LoginActivity

I have tried:

• running 'adb reverse tcp:8081 tcp:8081' before and after the npm start invocation
• modifying my app gradle file with various variations of the following:

compile 'com.android.support:appcompat-v7:23.2.1'
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:appcompat-v4:23.0.1'

compile 'com.facebook.react:react-native:+'
compile 'com.facebook.react:react-native:0.20.+'

I'm at a bit of a loss as to how to proceed/debug this issue.

Reproduction

Follow guide above.

Hook up guides code to a button is a fairly typical login view.

Press button. Watch spinner popup saying "Requesting JS Bundle"

Confirm in npm start/packager console output.

Watch it crash. Check output in logcat

Additional Information

• React Native version: compile 'com.facebook.react:react-native:+'
• Platform: Android Nexus 7 5.1.1
• Operating System: MacOS

[LiamInJapan]

It would seem possibly related somehow to this

[LiamInJapan]

From previous conversations I am trying to pull what I think the relevant bits might be from the relevant files:

AndroidManifest.xml

compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.facebook.react:react-native:0.20.1'

package.json

"dependencies": {
"react": "^0.14.8",
"react-native": "^0.22.2"
}

[LiamInJapan]

Excellent, I have now got to the red screen and successfully followed the rest of the instructions. However it is still crashing, this time with:

adb logcat *:S ReactNative:V ReactNativeJS:V
--------- beginning of crash
--------- beginning of system
--------- beginning of main
E/ReactNative( 3330): Got JS Exception: ReferenceError: Can't find variable: __fbBatchedBridge
E/ReactNative( 3330): Got JS Exception: ReferenceError: Can't find variable: __fbBatchedBridge
E/ReactNative( 3330): Got JS Exception: ReferenceError: Can't find variable: __fbBatchedBridge
E/ReactNative( 3330): Got JS Exception: ReferenceError: Can't find variable: __fbBatchedBridge
E/ReactNativeJS( 3952): undefined is not a function (evaluating '(bridgeConfig.remoteModuleConfig||[]).forEach')
I/ReactNativeJS( 3952): 'Failed to print error: ', 'Requiring module "31", which threw an exception.'
E/ReactNative( 3952): Got JS Exception: TypeError: undefined is not a function (evaluating '(bridgeConfig.remoteModuleConfig||[]).forEach')
E/ReactNativeJS( 4509): undefined is not a function (evaluating '(bridgeConfig.remoteModuleConfig||[]).forEach')
I/ReactNativeJS( 4509): 'Failed to print error: ', 'Requiring module "31", which threw an exception.'
E/ReactNative( 4509): Got JS Exception: TypeError: undefined is not a function (evaluating '(bridgeConfig.remoteModuleConfig||[]).forEach')
E/ReactNativeJS( 5396): undefined is not a function (evaluating '(bridgeConfig.remoteModuleConfig||[]).forEach')
I/ReactNativeJS( 5396): 'Failed to print error: ', 'Requiring module "31", which threw an exception.'
E/ReactNative( 5396): Got JS Exception: TypeError: undefined is not a function (evaluating '(bridgeConfig.remoteModuleConfig||[]).forEach')

[ericvicenti]

What command did you use to start the packager server? Does the log output reveal anything interesting?

[ericvicenti]

The batchedBridge problem usually happens when your bundle hasn't been generated properly. I'm going to close this issue for now because these duplicate issues with __fbBatchedBridge.

#6282

https://github.com/facebook/react-native/issues?utf8=%E2%9C%93&q=__fbBatchedBridge

[ericvicenti]

Feel free to open a new issue with a very specific problem and clear steps to reproduce it.

[LiamInJapan]

For the record, I used npm start, with the following in the package.json

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  }

As per the integrating with previous apps doc

The log output of the packager seems pretty uninteresting:

[11/15/2016, 1:31:48 PM] <START> Initializing Packager
[11/15/2016, 1:31:48 PM] <START> Building in-memory fs for JavaScript
[11/15/2016, 1:31:48 PM] <END>   Building in-memory fs for JavaScript (143ms)
[11/15/2016, 1:31:49 PM] <START> Building Haste Map
[11/15/2016, 1:31:49 PM] <END>   Building Haste Map (186ms)
[11/15/2016, 1:31:49 PM] <END>   Initializing Packager (620ms)
[11/15/2016, 1:33:22 PM] <START> Requesting bundle  url: /index.android.bundle?platform=android&dev=true&hot=false  
[11/15/2016, 1:33:22 PM] <START> Transforming modules
transformed 537/537 (100%)
[11/15/2016, 1:33:23 PM] <END>   Transforming modules (341ms)
[11/15/2016, 1:33:23 PM] <END>   Requesting bundle  url: /index.android.bundle?platform=android&dev=true&hot=false

[skevy]

@LiamInJapan did you ever resolve the issue with undefined is not a function (evaluating '(bridgeConfig.remoteModuleConfig||[]).forEach') that you mentioned above? I'm running into this as well?

[skevy]

cc @iam-peekay

[grydstedt]

@skevy running into this as well. Were you able to fix it?

[skevy]

It was actually @iam-peekay who was having this issue, I was just trying (unsuccessfully) to help her out. Preethi, did you ever make it past this issue?

[edo1493]

I am getting the same:

12-21 11:26:12.458  2879  3023 E ReactNativeJS: undefined is not a function (evaluating '(bridgeConfig.remoteModuleConfig||[]).forEach')
12-21 11:26:12.458  2879  3023 I ReactNativeJS: 'Failed to print error: ', 'Requiring module "53", which threw an exception.'
12-21 11:26:12.458  2879  3023 E ReactNative: Got JS Exception: TypeError: undefined is not a function (evaluating '(bridgeConfig.remoteModuleConfig||[]).forEach')

I am integrating some RN code with an existing Android app. Everything is updated. I thought I was running the wrong npm start from a different directory, but that isn't the case either.

The app crashes after:
setContentView(mReactRootView);

Regarding the output of the packager, it fails after all the files have been transformed.

[12/21/2016, 10:51:05 AM] <START> Initializing Packager
[12/21/2016, 10:51:05 AM] <START> Building in-memory fs for JavaScript
[12/21/2016, 10:51:05 AM] <END>   Building in-memory fs for JavaScript (170ms)
[12/21/2016, 10:51:05 AM] <START> Building Haste Map
[12/21/2016, 10:51:06 AM] <END>   Building Haste Map (293ms)
[12/21/2016, 10:51:06 AM] <END>   Initializing Packager (776ms)
[12/21/2016, 10:51:56 AM] <START> Requesting bundle bundle_url: /index.android.bundle?platform=android&dev=true&hot=false
[12/21/2016, 10:51:56 AM] <START> Transforming files
transformed 537/537 (100%)

[lucas-tulio]

I faced the same problem when trying to integrate RN into an existing app. I followed the guide here but ended up with the undefined is not a function (evaluating '(bridgeConfig.remoteModuleConfig||[]).forEach') crash.

The solution was to create a new RN project from scratch, with the same name as my current app, and then compare what was different between the new project and my existing one. By identifying and correcting these differences, I got my current app to work with RN as intended. Here's a list of the differences I noticed and the actions I took to fix them:

1. In my current project, I moved all my files and directories to a new android dir (except for things like README.md and .gitignore).
2. From the new RN project I created, I copied index.android.js, node_modules and package.json to the root of my existing project.
3. In the build.gradle file of my existing project's main module, I added the line apply from: "../../node_modules/react-native/react.gradle". I noticed this line was present in the new RN project, but nothing about it was being said in the documentation link I mentioned above.
4. In my settings.gradle file, I added the line rootProject.name = '<appname>'. I'm not sure this is needed or not, but it's there and it's working.

Other than that, I followed the instructions in the integration guide (like adding the react native gradle line and the maven url). After these steps, the React Native component was rendered successfully without any crashes.

[edo1493]

What I can see from my side is that gradle is picking RN 0.20.0+ from Maven, instead of RN 0.39.2 in the node_modules directory. That's why I am not able to use "onHostDestroy()" or "onHostPause()" in my ReactActivity.

However I am not sure if this is related, because with 0.20.0+ it just crashes.

[lucas-tulio]

@edo1493 I had the same problem with onHostDestroy() and onHostPause(). I also noticed didn't have the ReactApplication class before, so this problem could be related to how gradle was compiling the RN classes.

Do you have the line apply from: "../../node_modules/react-native/react.gradle" in the build.gradle of your main module? Other than that, I have maven { url "$rootDir/../node_modules/react-native/android" } in the build.gradle in the root of my project.

[lucas-tulio]

@edo1493 Now that you mentioned RN 0.20.0, I realized what the problem was. This snippet in my gradle file

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

had a wrong path to the React Native jars. When gradle can't find RN in this path, it doesn't throw an error, but instead looks in maven and finds an old version of it (0.20.0). You can see here that's the latest version maven has: https://mvnrepository.com/artifact/com.facebook.react/react-native

So that's why the bundle was failing: the app was using a very old version of RN. It also explains why we didn't have access to onHostDestroy(), onHostPause() or the ReactApplication class: these were added in newer versions, after 0.20.0.

Fixing the path to the local RN library solved the problem. Now the app is using RN 0.39.2 and the bundle doesn't fail anymore.

[shahbhavir]

@edo1493 @lucas-tulio these code/configs worked for me in integrating RN v0.39.2 with existing app. I hope it helps.

top-level build.gradle file:

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

app-level build.gradle file:

dependencies {
    // React Native
    compile 'com.facebook.react:react-native:0.39.2'
}

MyReactActivity file:

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                                                    .setApplication(getApplication())
                                                    .setBundleAssetName("index.android.bundle")
                                                    .setJSMainModuleName("index.android")
                                                    .addPackage(new MainReactPackage())
                                                    .setUseDeveloperSupport(BuildConfig.DEBUG)
                                                    .setInitialLifecycleState(
                                                            LifecycleState.RESUMED)
                                                    .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }


    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }
    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(this);
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}

[ghost]

Running into this one on iOS today, an actual fix would prevent this problem from ever happening in the first place, there shouldn't be any reasons for an infinite recursion instead of a friendly, descriptive error message in the console. Thanks.

[deepaksisodiya]

Same exception is coming in production but not in debug mode.
Any idea how to reproduce this exception locally?
And is this because of upgrading to RN 39?

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[jamesseanwright]

Thanks @lucas-tulio; your second comment pointed me in the right direction!

To eliminate the possibility of Gradle resolving the wrong version of React Native, be sure to specify an explicit version of the react-native Java library in your app's build.gradle file:

compile 'com.facebook.react:react-native:0.48.4'

Consequently, an incorrect Maven url method parameter will result in an error until you modify it to locate the correct version. That said, I'm still not sure why this happens; I'm not using React Native in any other projects, nor do I have it installed globally. Perhaps it falls back to JCenter, which I also use in my project.