[crash] multiple bundles in react-native 0.62

Do you want to request a feature or report a bug?

not sure.

What is the current behavior?

I have split index.bundle to multiple bundles, such as main.bundle and business.bundle. main.bundle contain react/react-native module, and custom every module id. They increase from 0.

  {
    "id": 482,
    "path": "node_modules/react-native/Libraries/vendor/core/mergeHelpers.js"
  },
  {
    "id": 483,
    "path": "node_modules/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.ios.js"
  },
  {
    "id": 484,
    "path": "node_modules/react-native/Libraries/Renderer/shims/NativeMethodsMixin.js"
  },

At the same time, business.bundle contain business logic code, and custom every module id, they increase from 10000.

  {
    "id": 100346,
    "path": "src/taro-router-rn/LoadingView.tsx"
  },
  {
    "id": 100347,
    "path": "src/taro-router-rn/TaroNavigator.ts"
  }

because our bundle download via network. In order to only update business code when we upload new bundle, we split index.bundle to multiple bundles so we can only upload business.bundle.

It can run normally on react-native 0.61, but crash on 0.62.

I had rewrite ReactActivity, include 'ReactNativeHost', the important method is

   protected void loadAppMulti() {
        mReactRootView = new ReactRootView(this);
        ReactInstanceManagerBuilder builder = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setJSMainModulePath(getJSMainModulePath())
                .setUseDeveloperSupport(getUseDeveloperSupport())
                .setRedBoxHandler(getRedBoxHandler())
                .setJavaScriptExecutorFactory(getJavaScriptExecutorFactory())
                .setUIImplementationProvider(getUIImplementationProvider())
                .setJSIModulesPackage(getJSIModulePackage())
                .setCurrentActivity(this)
                .setInitialLifecycleState(LifecycleState.BEFORE_CREATE);

        for (ReactPackage reactPackage : getPackages()) {
            builder.addPackage(reactPackage);
        }

        String[] jsBundleFiles = getJSBundleFile();
        String mainBundleFile;
        String[] businessBundleFiles;
        boolean isLoadFile = true;
        if (jsBundleFiles != null) {
            if (jsBundleFiles.length < 2) {
                throw new IllegalArgumentException("The method getJSBundleFile() must return more than 2 elements");
            }
            mainBundleFile = jsBundleFiles[0];
            businessBundleFiles = Arrays.copyOfRange(jsBundleFiles, 1, jsBundleFiles.length);
            builder.setJSBundleFile(mainBundleFile);
        } else {
            String[] assetNames = getBundleAssetName();
            if (assetNames.length < 2) {
                throw new IllegalArgumentException("The method getBundleAssetName() must return more than 2 elements");
            }
            mainBundleFile = assetNames[0];
            businessBundleFiles = Arrays.copyOfRange(assetNames, 1, assetNames.length);
            builder.setBundleAssetName(mainBundleFile);
            isLoadFile = false;
        }
        mReactInstanceManager = builder.build();
        mHeyteaReactDelegate.setReactInstanceManager(mReactInstanceManager);
        boolean finalIsLoadFile = isLoadFile;
        mReactInstanceManager.addReactInstanceEventListener(context -> {
            if (finalIsLoadFile) {
                LoadScriptUtil.loadScriptFromFile(mReactInstanceManager, false, businessBundleFiles);
            } else {
                LoadScriptUtil.loadScriptFromAsset(mReactInstanceManager, false, businessBundleFiles);
            }
            mReactRootView.startReactApplication(mReactInstanceManager, getMainComponentName(), getLaunchOptions());
            setContentView(mReactRootView);

            resumeLifeCycle();
        });
        if (!mReactInstanceManager.hasStartedCreatingInitialContext()) {
            mReactInstanceManager.createReactContextInBackground();
        }
    }

LoadScriptUtil.java

    public static void loadScriptFromFile(ReactInstanceManager reactInstanceManager,
                                          boolean loadSynchronously,
                                          @NonNull String... bundleFiles) {
        CatalystInstance catalystInstance = getCatalystInstance(reactInstanceManager);
        if (catalystInstance == null) {
            return;
        }
        Context context = reactInstanceManager.getCurrentReactContext();
        if (context == null) {
            return;
        }
        for (String bundleFile : bundleFiles) {
            catalystInstance.loadScriptFromFile(bundleFile, bundleFile, loadSynchronously);
        }
    }

Crash Info:

2020-04-26 12:57:01.786 2224-32339/? E/NetworkScheduler.SR: Invalid parameter app
2020-04-26 12:57:01.786 2224-32339/? E/NetworkScheduler.SR: Invalid package name : Perhaps you didn't include a PendingIntent in the extras?
2020-04-26 12:57:01.913 8643-8689/com.heyteago E/ReactNativeJS: Error: Requiring unknown module "386".
2020-04-26 12:57:01.922 8643-8643/com.heyteago E/unknown:ReactNative: Unable to launch logbox because react was unable to create the root view
2020-04-26 12:57:01.956 8643-8689/com.heyteago E/ReactNativeJS: Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
2020-04-26 12:57:01.978 8643-8690/com.heyteago E/AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
    Process: com.heyteago, PID: 8643
    com.facebook.react.common.JavascriptException: Error: Requiring unknown module "386"., stack:
    v@2:1305
    <unknown>@85:3937
    v@2:1473
    <unknown>@62:1851
    v@2:1473
    <unknown>@61:1081
    v@2:1473
    <unknown>@7:1258
    v@2:1473
    <unknown>@2:234
    v@2:1473
    <unknown>@1:57
    v@2:1473
    d@2:875
    global code@165:3
    
        at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:79)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
        at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:151)
        at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
        at android.os.Handler.handleCallback(Handler.java:751)
        at android.os.Handler.dispatchMessage(Handler.java:95)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
        at android.os.Looper.loop(Looper.java:154)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
        at java.lang.Thread.run(Thread.java:761)
2020-04-26 12:57:02.376 1716-14964/? E/eglCodecCommon: glUtilsParamSize: unknow param 0x00008cdf
2020-04-26 12:57:02.377 1716-14964/? E/eglCodecCommon: glUtilsParamSize: unknow param 0x00008824
2020-04-26 12:57:02.394 1415-23197/? E/AudioFlinger: not enough memory for AudioTrack size=131296
2020-04-26 12:57:02.408 1415-23197/? E/AudioFlinger: createRecordTrack_l() initCheck failed -12; no control block?
2020-04-26 12:57:02.408 20326-8451/? E/AudioRecord: AudioFlinger could not create record track, status: -12

But it run on ReactNative 0.61 successfully.

Start with the ReactActivity loadAppMulti implementation and LoadScriptUtil.java, then compare Metro and React Native 0.61 versus 0.62 bundle behavior. Reproduce the multiple-bundle setup and investigate the reported unknown module "386"; done means the main and business bundles load without the crash on 0.62.