Release apk crashing on using local chunks [Could not invoke ScriptManager.loadScript]

[ayushnathani]

I am using local chunks with repack 4.2.0. The app is working fine in debug mode, but it is crashing in release apk with the following error

FATAL EXCEPTION: mqt_native_modules
                                                                                                    Process: money.jupiter, PID: 6948
                                                                                                    java.lang.RuntimeException: Could not invoke ScriptManager.loadScript
                                                                                                    	at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:193)
                                                                                                    	at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:148)
                                                                                                    	at com.facebook.jni.NativeRunnable.run(Native Method)
                                                                                                    	at android.os.Handler.handleCallback(Handler.java:938)
                                                                                                    	at android.os.Handler.dispatchMessage(Handler.java:99)
                                                                                                    	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:1)
                                                                                                    	at android.os.Looper.loop(Looper.java:236)
                                                                                                    	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:38)
                                                                                                    	at java.lang.Thread.run(Thread.java:923)
                                                                                                    Caused by: java.lang.reflect.InvocationTargetException
                                                                                                    	at java.lang.reflect.Method.invoke(Native Method)
                                                                                                    	at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:149)
                                                                                                    	at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:148) 
                                                                                                    	at com.facebook.jni.NativeRunnable.run(Native Method) 
                                                                                                    	at android.os.Handler.handleCallback(Handler.java:938) 
                                                                                                    	at android.os.Handler.dispatchMessage(Handler.java:99) 
                                                                                                    	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:1) 
                                                                                                    	at android.os.Looper.loop(Looper.java:236) 
                                                                                                    	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:38) 
                                                                                                    	at java.lang.Thread.run(Thread.java:923) 
                                                                                                    Caused by: java.net.MalformedURLException: unknown protocol: noop
                                                                                                    	at java.net.URL.<init>(URL.java:608)
                                                                                                    	at java.net.URL.<init>(URL.java:498)
                                                                                                    	at java.net.URL.<init>(URL.java:447)
                                                                                                    	at com.callstack.repack.c$a.a(ScriptConfig.kt:129)
                                                                                                    	at com.callstack.repack.ScriptManagerModule.loadScript(ScriptManagerModule.kt:18)
                                                                                                    	at java.lang.reflect.Method.invoke(Native Method) 
                                                                                                    	at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:149) 
                                                                                                    	at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:148) 
                                                                                                    	at com.facebook.jni.NativeRunnable.run(Native Method) 
                                                                                                    	at android.os.Handler.handleCallback(Handler.java:938) 
                                                                                                    	at android.os.Handler.dispatchMessage(Handler.java:99) 
                                                                                                    	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:1) 
                                                                                                    	at android.os.Looper.loop(Looper.java:236) 
                                                                                                    	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:38) 
                                                                                                    	at java.lang.Thread.run(Thread.java:923) 

Webpack config

import { createRequire } from 'node:module';
import path from 'node:path';
import TerserPlugin from 'terser-webpack-plugin';
import * as Repack from '@callstack/repack';

const dirname = Repack.getDirname(import.meta.url);
const { resolve } = createRequire(import.meta.url);

/**
 * More documentation, installation, usage, motivation and differences with Metro is available at:
 * https://github.com/callstack/repack/blob/main/README.md
 *
 * The API documentation for the functions and plugins used in this file is available at:
 * https://re-pack.dev
 */

/**
 * Webpack configuration.
 * You can also export a static object or a function returning a Promise.
 *
 * @param env Environment options passed from either Webpack CLI or React Native CLI
 *            when running with `react-native start/bundle`.
 */
export default env => {
  const {
    mode = 'development',
    context = dirname,
    entry = './index.js',
    platform = process.env.PLATFORM,
    minimize = mode === 'production',
    devServer = undefined,
    bundleFilename = undefined,
    sourceMapFilename = undefined,
    assetsPath = undefined,
    reactNativePath = resolve('react-native'),
  } = env;

  if (!platform) {
    throw new Error('Missing platform');
  }

  /**
   * Using Module Federation might require disabling hmr.
   * Uncomment below to set `devServer.hmr` to `false`.
   *
   * Keep in mind that `devServer` object is not available
   * when running `webpack-bundle` command. Be sure
   * to check its value to avoid accessing undefined value,
   * otherwise an error might occur.
   */
  // if (devServer) {
  //   devServer.hmr = false;
  // }

  /**
   * Depending on your Babel configuration you might want to keep it.
   * If you don't use `env` in your Babel config, you can remove it.
   *
   * Keep in mind that if you remove it you should set `BABEL_ENV` or `NODE_ENV`
   * to `development` or `production`. Otherwise your production code might be compiled with
   * in development mode by Babel.
   */
  process.env.BABEL_ENV = mode;

  return {
    mode,
    /**
     * This should be always `false`, since the Source Map configuration is done
     * by `SourceMapDevToolPlugin`.
     */
    devtool: false,
    context,
    /**
     * `getInitializationEntries` will return necessary entries with setup and initialization code.
     * If you don't want to use Hot Module Replacement, set `hmr` option to `false`. By default,
     * HMR will be enabled in development mode.
     */
    entry: [
      ...Repack.getInitializationEntries(reactNativePath, {
        hmr: devServer && devServer.hmr,
      }),
      'react-native-url-polyfill/auto',
      entry,
    ],
    resolve: {
      /**
       * `getResolveOptions` returns additional resolution configuration for React Native.
       * If it's removed, you won't be able to use `<file>.<platform>.<ext>` (eg: `file.ios.js`)
       * convention and some 3rd-party libraries that specify `react-native` field
       * in their `package.json` might not work correctly.
       */
      ...Repack.getResolveOptions(platform),

      /**
       * Uncomment this to ensure all `react-native*` imports will resolve to the same React Native
       * dependency. You might need it when using workspaces/monorepos or unconventional project
       * structure. For simple/typical project you won't need it.
       */
      // alias: {
      //   'react-native': reactNativePath,
      // },
      // alias: {
      //   // Alias for nanoid/non-secure to point to the React Native specific entry
      //   'nanoid/non-secure': resolve('./index.js'),
      //   axios: resolve('./index.js'),
      // },
    },

    /**
     * Configures output.
     * It's recommended to leave it as it is unless you know what you're doing.
     * By default Webpack will emit files into the directory specified under `path`. In order for the
     * React Native app use them when bundling the `.ipa`/`.apk`, they need to be copied over with
     * `Repack.OutputPlugin`, which is configured by default inside `Repack.RepackPlugin`.
     */
    output: {
      clean: true,
      hashFunction: 'xxhash64',
      path: path.join(dirname, 'build/generated', platform),
      filename: 'index.bundle',
      chunkFilename: '[name].chunk.bundle',
      publicPath: Repack.getPublicPath({ platform, devServer }),
    },
    /**
     * Configures optimization of the built bundle.
     */
    optimization: {
      /** Enables minification based on values passed from React Native CLI or from fallback. */
      minimize,
      /** Configure minimizer to process the bundle. */
      minimizer: [
        new TerserPlugin({
          test: /\.(js)?bundle(\?.*)?$/i,
          /**
           * Prevents emitting text file with comments, licenses etc.
           * If you want to gather in-file licenses, feel free to remove this line or configure it
           * differently.
           */
          extractComments: false,
          terserOptions: {
            format: {
              comments: false,
            },
          },
        }),
      ],
      chunkIds: 'named',
    },
    module: {
      /**
       * This rule will process all React Native related dependencies with Babel.
       * If you have a 3rd-party dependency that you need to transpile, you can add it to the
       * `include` list.
       *
       * You can also enable persistent caching with `cacheDirectory` - please refer to:
       * https://github.com/babel/babel-loader#options
       */
      rules: [
        {
          test: /\.[cm]?[jt]sx?$/,
          include: [
            // Include all node_modules except localforage
            /node_modules(?!\/localforage)/,
            /node_modules(.*[/\\])+@callstack(.*[/\\])+repack/,
            /node_modules(.*[/\\])+whatwg-url/,
          ],

          // include: [
          //   /node_modules(.*[/\\])+react-native/,
          //   /node_modules(.*[/\\])+@react-native/,
          //   /node_modules(.*[/\\])+@react-navigation/,
          //   /node_modules(.*[/\\])+@react-native-community/,
          //   /node_modules(.*[/\\])+expo/,
          //   /node_modules(.*[/\\])+pretty-format/,
          //   /node_modules(.*[/\\])+metro/,
          //   /node_modules(.*[/\\])+abort-controller/,
          //   /node_modules(.*[/\\])+@callstack[/\\]repack/,
          //   /node_modules(.*[/\\])+@amplitude[/\\]analytics-react-native/,
          //   /node_modules(.*[/\\])+@datadog[/\\]mobile-react-native/,
          //   /node_modules(.*[/\\])+@datadog[/\\]mobile-react-navigation/,
          //   /node_modules(.*[/\\])+@jupitermoney[/\\]sense-ui/,
          //   /node_modules(.*[/\\])+@segment[/\\]analytics-react-native-plugin-clevertap/,
          //   /node_modules(.*[/\\])+lottie-react-native/,
          //   /node_modules(.*[/\\])+react-freeze/,
          //   /node_modules(.*[/\\])+sp-react-native-in-app-updates/,
          //   /node_modules(.*[/\\])+@gorhom/,
          //   /node_modules(.*[/\\])+@segment[/\\]analytics-react-native-plugin-device-token/,
          //   /node_modules(.*[/\\])+@segment[/\\]analytics-react-native/,
          //   /node_modules(.*[/\\])+moti/,
          //   /node_modules(.*[/\\])+@segment[/\\]sovran-react-native/,
          //   /node_modules(.*[/\\])+@motionone/,
          //   /node_modules(.*[/\\])+nanoid/,
          //   /node_modules(.*[/\\])+superstruct/,
          //   /node_modules(.*[/\\])+@sentry/,
          //   /node_modules(.*[/\\])+axios/,
          //   /node_modules(.*[/\\])+clevertap-react-native/,
          //   /node_modules(.*[/\\])+dayjs/,
          // ],
          use: 'babel-loader',
          type: 'javascript/dynamic',
        },
        /**
         * Here you can adjust loader that will process your files.
         *
         * You can also enable persistent caching with `cacheDirectory` - please refer to:
         * https://github.com/babel/babel-loader#options
         */
        {
          test: /\.[jt]sx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              /** Add React Refresh transform only when HMR is enabled. */
              plugins: devServer && devServer.hmr ? ['module:react-refresh/babel'] : undefined,
            },
          },
        },
        /**
         * This loader handles all static assets (images, video, audio and others), so that you can
         * use (reference) them inside your application.
         *
         * If you want to handle specific asset type manually, filter out the extension
         * from `ASSET_EXTENSIONS`, for example:
         * ```
         * Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg')
         * ```
         */
        {
          test: Repack.getAssetExtensionsRegExp([...Repack.ASSET_EXTENSIONS.filter(ext => ext !== 'svg'), 'lottie']),
          use: {
            loader: '@callstack/repack/assets-loader',
            options: {
              platform,
              devServerEnabled: Boolean(devServer),
              /**
               * Defines which assets are scalable - which assets can have
               * scale suffixes: `@1x`, `@2x` and so on.
               * By default all images are scalable.
               */
              scalableAssetExtensions: Repack.SCALABLE_ASSETS,
            },
          },
        },
        {
          test: /\.svg$/,
          use: [
            {
              loader: '@svgr/webpack',
              options: {
                native: true,
                // You might want to uncomment the following line.
                // More info: https://react-svgr.com/docs/options/#dimensions
                // dimensions: false,
              },
            },
          ],
        },
      ],
    },
    plugins: [
      /**
       * Configure other required and additional plugins to make the bundle
       * work in React Native and provide good development experience with
       * sensible defaults.
       *
       * `Repack.RepackPlugin` provides some degree of customization, but if you
       * need more control, you can replace `Repack.RepackPlugin` with plugins
       * from `Repack.plugins`.
       */
      new Repack.RepackPlugin({
        context,
        mode,
        platform,
        devServer,
        output: {
          bundleFilename,
          sourceMapFilename,
          assetsPath,
        },
        extraChunks: [
          {
            include: /^src_.+$/,
            type: 'local',
          },
          {
            exclude: /^src_.+$/,
            type: 'remote',
            outputPath: path.join('build/output', platform, 'remote'),
          },
        ],
      }),
    ],
  };
};

index.js

import { AppRegistry } from 'react-native';
import { ScriptManager, Script } from '@callstack/repack/client';

import App from './src/App';
import { name as appName } from './app.json';

ScriptManager.shared.addResolver(async scriptId => {
  // In dev mode, resolve script location to dev server.
  if (__DEV__) {
    return {
      url: Script.getDevServerURL(scriptId),
      cache: false,
    };
  }

  if (/^src_.+$/.test(scriptId)) {
    return {
      url: Script.getFileSystemURL(scriptId),
    };
  }
});

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

React native info

System:
  OS: macOS 13.5.2
  CPU: (10) arm64 Apple M1 Pro
  Memory: 97.53 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.16.1
    path: /usr/local/bin/node
  Yarn:
    version: 3.2.0
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.6.7
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.06.24.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/ayushnathani/.rvm/rubies/ruby-2.7.4/bin/pod
SDKs:
  iOS SDK: Not Found
  Android SDK:
    Android NDK: 22.1.7171670
IDEs:
  Android Studio: 2024.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: /undefined
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.7.4
    path: /Users/ayushnathani/.rvm/rubies/ruby-2.7.4/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.8
    wanted: 0.72.8
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

[jbroma]

Hi @ayushnathani, I'm pretty sure if you update to 4.3.1 your issue should be gone - most likely caused by this: #690. Your configurations looks solid at a glance 👍

[ayushnathani]

This is fixed on updating to 4.3.2