Table of contents

In React Native 0.62, after building a signed apk, index.android.bundle is a binary file

React Native Jul 16, 2020 Viewed 290 Comments 0

Issue

Before building a signed apk, I run the below command to bundle my android application project. It generates a javascript bundle file named index.android.bundle.

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

After building a signed apk in android studio. I unzip the apk and try to view index.android.bundle, It shows that index.android.bundle is a binary file.

$ unzip app-release.apk
$ less assets/index.android.bundle
"assets/index.android.bundle" may be a binary file.  See it anyway?

Since I had done a ReactJs error handling, the app will send the error message to server when there is an exception. It's very useful for bug fixes. The javascript error log is as follows:

{
  "message": "Can't find variable: test",
  "stack": [
    {
      "file": "index.android.bundle",
      "methodName": "value",
      "arguments": [],
      "lineNumber": 814,
      "column": 15055
    },
    {
      "file": "[native code]",
      "methodName": "value",
      "arguments": [],
      "lineNumber": null,
      "column": null
    },
    {
      "file": "index.android.bundle",
      "methodName": "onPress",
      "arguments": [],
      "lineNumber": 232,
      "column": 1701
    },
    ...
  ]
}

The following is the format of the error log after upgrading to 0.62. Both methodName and lineNumber (always line 1) become unreadable.

{
  "message": "Property 'test' doesn't exist",
  "stack": [
    {
      "file": "index.android.bundle",
      "methodName": "value (address at",
      "arguments": [],
      "lineNumber": 1,
      "column": 901699
    },
    {
      "file": "index.android.bundle",
      "methodName": "onPress (address at",
      "arguments": [],
      "lineNumber": 1,
      "column": 271115
    },
    {
      "file": "index.android.bundle",
      "methodName": "value (address at",
      "arguments": [],
      "lineNumber": 1,
      "column": 267186
    },
    ...
  ]
}

Solution

Open the file of android/app/build.gradle, change enableHermes to false.

 project.ext.react = [
-    enableHermes: true,  // clean and rebuild if changing
+    enableHermes: false,  // clean and rebuild if changing
 ]

In development mode, it can be modified to true, it's convenient to debug with flipper.

Updated Jul 16, 2020