How to group remote chunks together into one chunk?

[ayushnathani]

I want to create a remote chunk of an entire feature, which has a lot of files. I don't want to create seperate chunk of each of those files as I don't want to download them individually because they are a part of one feature and should be accessed at once. Is there way I can group all the files into one chunk and that chunks gets downloaded whenever I access any of the file?
Note: I am using react navigation

[jbroma]

Hi @ayushnathani,

I think you can achieve this through cache groups - this requires a little bit of tinkering to get right but it's possible. Note that cache groups are just suggestions for the compiler and sometimes might get ignored if you have a conflicting configuration.

[ayushnathani]

Ok, so I tried this. I was able to create a chunk named cancelled-cheque.chunk.bundle. But it is crashing on production with this error

 com.facebook.react.common.JavascriptException: TypeError: Cannot read property 'call' of undefined
                                                                                                    
                                                                                                    This error is located at:
                                                                                                        in Lazy
                                                                                                        in Suspense
                                                                                                        in DigitalPassbookWrapper
                                                                                                        in StaticContainer
                                                                                                        in EnsureSingleNavigator
                                                                                                        in SceneView
                                                                                                        in RCTView
                                                                                                        in Unknown
                                                                                                        in DebugContainer
                                                                                                        in MaybeNestedStack
                                                                                                        in RCTView
                                                                                                        in Unknown
                                                                                                        in RNSScreen
                                                                                                        in Unknown
                                                                                                        in Suspender
                                                                                                        in Suspense
                                                                                                        in Freeze
                                                                                                        in DelayedFreeze
                                                                                                        in InnerScreen
                                                                                                        in Screen
                                                                                                        in SceneView
                                                                                                        in Suspender
                                                                                                        in Suspense
                                                                                                        in Freeze
                                                                                                        in DelayedFreeze
                                                                                                        in RNSScreenStack
                                                                                                        in ScreenStack
                                                                                                        in NativeStackViewInner
                                                                                                        in RCTView
                                                                                                        in Unknown
                                                                                                        in SafeAreaProviderCompat
                                                                                                        in NativeStackView
                                                                                                        in PreventRemoveProvider
                                                                                                        in NavigationContent
                                                                                                        in Unknown
                                                                                                        in NativeStackNavigator
                                                                                                        in Stack
                                                                                                        in ApiLoggerProvider
                                                                                                        in EnsureSingleNavigator
                                                                                                        in BaseNavigationContainer
                                                                                                        in ThemeProvider
                                                                                                        in NavigationContainerInner
                                                                                                        in AppNavigation
                                                                                                        in NavigationListener
                                                                                                        in RCTView
                                                                                                        in Unknown
                                                                                                        in RCTView
                                                                                                        in Unknown
                                                                                                        in CustomActionSheet
                                                                                                        in ActionSheetProvider
                                                                                                        in SWRConfig$1
                                                                                                        in SnackbarProvider
                                                                                                        in ToastProvider
                                                                                                        in BottomSheetProvider
                                                                                                        in NoInternetBannerProvider
                                                                                                        in AppValidity
                                                                                                        in RCTView
                                                                                                        in Unknown
                                                                                                        in UserInactivity
                                                                                                        in UserInactivityTracker
                                                                                                        in RCTView
                                                                                                        in Unknown
                                                                                                        in Unknown
                                                                                                        in AppLockWrapper
                                                                                                        in AppState
                                                                                                        in RNCSafeAreaProvider
                                                                                                        in SafeAreaProvider
                                                                                                        in Unknown
                                                                                                        in Unknown
                                                                                                        in RemoteConfigProvider
                                                                                                        in RNGestureHandlerRootView
                                                                                                        in GestureHandlerRootView
                                                                                                        in EuropaProvider
                                                                                                        in AnalyticsProvider
                                                                                                        in DatadogProvider
                                                                                                        in App
                                                                                                        in ReactNativeProfiler
                                                                                                        in RCTView
                                                                                                        in Unknown
                                                                                                        in __Sentry.TouchEventBoundary
                                                                                                        in RootApp
                                                                                                        in Unknown
                                                                                                        in RCTView
                                                                                                        in Unknown
                                                                                                        in RCTView
                                                                                                        in Unknown
                                                                                                        in AppContainer, js engine: hermes, stack:
                                                                                                    __webpack_require__@1:110475
                                                                                                    tryCallOne@1:12441248
                                                                                                    anonymous@1:12441932
                                                                                                    anonymous@1:13785773
                                                                                                    _callTimer@1:13784749
                                                                                                    _callReactNativeMicrotasksPass@1:13784920
                                                                                                    callReactNativeMicrotasks@1:13786872
                                                                                                    __callReactNativeMicrotasks@1:13681422
                                                                                                    anonymous@1:13680536
                                                                                                    __guard@1:13681297
                                                                                                    flushedQueue@1:13680447
                                                                                                    
                                                                                                    	at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:76)
                                                                                                    	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,
            },
          },
        }),
      ],
      splitChunks: {
        cacheGroups: {
          cancelledCheque: {
            test: /[\\/]src[\\/]sections[\\/]settings[\\/]screens[\\/]CancelledCheque[\\/]/,
            name: 'cancelled-cheque',
            chunks: 'async',
            enforce: true,
          },
        },
      },
      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: [/^cancelled-cheque.*/],
            type: 'remote',
            outputPath: path.join('build/output', platform, 'remote'),
          },
          {
            exclude: [/^cancelled-cheque.*/],
            type: 'local',
          },
        ],
      }),
    ],
  };
};

[jbroma]

by adding cacheGroups you've removed the default ones which are likely needed - try adding them back