App compilation is complete but app is crashing on launch

[ayushnathani]

I am trying to use repack for my react native project and getting this error

I am not able to see this on webpack though.

Here is my 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,
      }),
      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,
      // },
    },
    /**
     * 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: [
            /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/,
          ],
          use: 'babel-loader',
        },
        /**
         * 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),
          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: /\.lottie$/,
          type: 'asset/resource',
        },
      ],
    },
    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,
        },
      }),
    ],
  };
};

React native info output

System:
  OS: macOS 13.5.2
  CPU: (10) arm64 Apple M1 Pro
  Memory: 133.41 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:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK:
    Android NDK: 22.1.7171670
IDEs:
  Android Studio: 2024.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /Users/ayushnathani/.sdkman/candidates/java/current/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,

please add type: 'javascript/dynamic' to your node_module rules like this:

{
  test: /\.[cm]?[jt]sx?$/,
  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/,
  ],
  use: 'babel-loader',
  type: 'javascript/dynamic' // <-- this line here
},

let me know if that helps!

[ayushnathani]

@jbroma I added type: javascript/dynamic and a few more packages from node modules. And now I am getting this error at runTime in lot of my project files.

toDateString is not undefined btw. This is my toDateString method export const toDateString = (date: Date | Dayjs) => dayjs(date).format('YYYY-MM-DD');

 E  Exception in native call from JS
                                                                                                    com.facebook.react.devsupport.JSException: 0,_date.toDateString is not a function (it is undefined)
                                                                                                        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:27)
                                                                                                        at android.os.Looper.loop(Looper.java:236)
                                                                                                        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228)
                                                                                                        at java.lang.Thread.run(Thread.java:923)
                                                                                                    Caused by: com.facebook.jni.CppException: 0,_date.toDateString is not a function (it is undefined)

                                                                                                    TypeError: 0,_date.toDateString is not a function (it is undefined)
                                                                                                        at ./src/sections/insights/old/utils.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:162330:1540)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./src/sections/pots/common/constants.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:162990:458)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./src/helpers/date.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:161582:3258)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./src/sections/money/common/pfmUtils.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:162462:2225)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./src/constants/default-remote-config.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:160790:121)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
2024-08-15 12:38:51.702 19887-25081 unknown:ReactNative     money.jupiter                        E      at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./src/services/remote-config.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:163386:1115)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./src/services/upi.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:163606:2001)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./src/navigation/deep-linking.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:162066:692)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./src/services/analytics.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:163034:2050)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./src/providers/analytics.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:162198:248)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./src/europa/foundation.tsx (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:161186:1285)
                                                                                                        at call (native)
2024-08-15 12:38:51.702 19887-25081 unknown:ReactNative     money.jupiter                        E      at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./src/europa/index.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:161230:998)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./src/components/JupiterSplash.tsx (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:160526:386)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./src/components/withSecurityScreen.tsx (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:160746:917)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./src/App.tsx (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:160350:233)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165218:28)
                                                                                                        at ./index.js (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:160306:424)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165560:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:165046:37)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:166272:56)
2024-08-15 12:38:51.702 19887-25081 unknown:ReactNative     money.jupiter                        E      at global (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:166275:12)

[jbroma]

try with include: [/node_modules/] and see if that helps 👍

[ayushnathani]

I tries this but nothing happened. I then changed the toDateString from arrow function to a normal function. I got past the date error but now getting this error.

Exception in native call from JS
                                                                                                    com.facebook.react.devsupport.JSException: Cannot read property 'ALL_BANKS' of undefined
                                                                                                        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:27)
                                                                                                        at android.os.Looper.loop(Looper.java:236)
                                                                                                        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228)
                                                                                                        at java.lang.Thread.run(Thread.java:923)
                                                                                                    Caused by: com.facebook.jni.CppException: Cannot read property 'ALL_BANKS' of undefined

                                                                                                    TypeError: Cannot read property 'ALL_BANKS' of undefined
                                                                                                        at ./src/sections/money/common/constants/index.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:37215:7366)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38743:28)
                                                                                                        at ./src/sections/money/common/utils/index.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:37347:2428)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38743:28)
                                                                                                        at ./src/sections/money/common/pfmUtils.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:37259:2909)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38743:28)
                                                                                                        at ./src/constants/default-remote-config.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:35587:121)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38743:28)
                                                                                                        at ./src/services/remote-config.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38183:1115)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
2024-08-15 17:37:14.653  4858-17223 unknown:ReactNative     money.jupiter                        E      at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38743:28)
                                                                                                        at ./src/services/upi.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38403:2001)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38743:28)
                                                                                                        at ./src/navigation/deep-linking.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:36863:692)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38743:28)
                                                                                                        at ./src/services/analytics.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:37831:2050)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38743:28)
                                                                                                        at ./src/providers/analytics.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:36995:248)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38743:28)
                                                                                                        at ./src/europa/foundation.tsx (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:35983:1285)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38743:28)
                                                                                                        at ./src/europa/index.ts (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:36027:998)
                                                                                                        at call (native)
2024-08-15 17:37:14.653  4858-17223 unknown:ReactNative     money.jupiter                        E      at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38743:28)
                                                                                                        at ./src/components/JupiterSplash.tsx (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:35323:386)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38743:28)
                                                                                                        at ./src/components/withSecurityScreen.tsx (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:35543:917)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38743:28)
                                                                                                        at ./src/App.tsx (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:35147:233)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at fn (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38743:28)
                                                                                                        at ./index.js (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:35103:424)
                                                                                                        at call (native)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39085:35)
                                                                                                        at call (native)
                                                                                                        at __webpack_require__ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:38606:37)
                                                                                                        at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39797:56)
                                                                                                        at global (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=money.jupiter&modulesOnly=false&runModule=true:39800:12)
                                                                                                        ... 7 more

[jbroma]

Something must not get transpiled correctly there, can you show me your webpack.config please?

[ayushnathani]

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,
      }),
      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)/,
          ],

          // 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,
            },
          },
          type: 'javascript/dynamic',
        },
        /**
         * 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),
          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: /\.lottie$/,
          type: 'asset/resource',
        },
      ],
    },
    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,
        },
      }),
    ],
  };
};

[jbroma]

try using type: 'javascript/dynamic' only inside the rule for node_modules please

[ayushnathani]

Nope, Still the same

[jbroma]

Please create a minimal reproduction repository so I can take a closer look at this

[jbroma]

btw, can you share your babel config as well please?

[ayushnathani]

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'babel-plugin-transform-typescript-metadata',
    'react-native-reanimated/plugin',
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.js', '.ts', '.tsx', '.json'],
        alias: {
          tests: ['./tests/'],
          europa: './src/europa',
          '@constants': './src/constants',
          '@svg': './src/svg',
          '@hooks': './src/hooks',
          '@helpers': './src/helpers',
          '@api': './src/generated/api',
          '@sections': './src/sections',
          '@services': './src/services',
          '@providers': './src/providers',
          '@components': './src/components',
          '@navigation': './src/navigation',
          '@lotties': './src/lotties',
          '@data': './src/data',
        },
      },
    ],
  ],
  env: {
    production: {
      plugins: ['transform-remove-console'],
    },
  },
};

[jbroma]

hmm, you can also try making 'react-native-reanimated/plugin' last one in the list as it might be causing issues

[ayushnathani]

Still the same. I'll try to create a reproducer

[ayushnathani]

Hey @jbroma, Sharing some of the findings that I found:

1. Dynamic import are not working with react navigation Here is a reproducer for the same - https://github.com/ayushnathani/repackRepro
2. I am facing issue while importing some specific methods and enums like toDateString - https://github.com/callstack/repack/issues/689#issuecomment-2290795721 https://github.com/callstack/repack/issues/689#issuecomment-2291164857 When I declare these functions/enums inside the files where they being imported, they work fine. I am not able to reproduce this in the reproducer. Any plugin/package that could be causing this?
3. Also my project is a mono-repo but I only have one app in it. I have installed repack in my app folder itself.

Updated 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,
      }),
      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(.*[/\\])+dayjs/,
          ],

          // 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')),
          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: /\.lottie$/,
          type: 'asset/resource',
        },
        {
          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,
        },
      }),
    ],
  };
};

package.json

"dependencies": {
    "@amplitude/analytics-react-native": "^1.4.7",
    "@animatereactnative/marquee": "^0.2.0",
    "@apidevtools/swagger-parser": "10.0.3",
    "@babel/preset-typescript": "^7.18.6",
    "@datadog/mobile-react-native": "2.3.2",
    "@datadog/mobile-react-navigation": "2.3.2",
    "@expo/react-native-action-sheet": "4.0.1",
    "@formatjs/intl-datetimeformat": "^6.2.0",
    "@formatjs/intl-displaynames": "^6.1.3",
    "@formatjs/intl-getcanonicallocales": "^2.0.4",
    "@formatjs/intl-listformat": "^7.1.2",
    "@formatjs/intl-locale": "3.0.11",
    "@formatjs/intl-numberformat": "^8.1.3",
    "@formatjs/intl-pluralrules": "^5.1.3",
    "@formatjs/intl-relativetimeformat": "^11.1.3",
    "@gorhom/bottom-sheet": "4.4.5",
    "@invertase/react-native-apple-authentication": "2.1.5",
    "@jupitermoney/europa-design-tokens": "1.0.4",
    "@jupitermoney/europa-ui": "1.0.12",
    "@jupitermoney/sense-design-tokens": "1.1.5",
    "@jupitermoney/sense-ui": "1.1.56",
    "@jupitermoney/victory-native": "36.6.8",
    "@miblanchard/react-native-slider": "2.3.1",
    "@react-native-async-storage/async-storage": "1.15.8",
    "@react-native-community/blur": "4.3.2",
    "@react-native-community/clipboard": "1.5.1",
    "@react-native-community/geolocation": "2.0.2",
    "@react-native-community/hooks": "2.8.0",
    "@react-native-community/netinfo": "8.3.1",
    "@react-native-community/push-notification-ios": "1.10.1",
    "@react-native-community/slider": "4.4.3",
    "@react-native-firebase/analytics": "18.6.1",
    "@react-native-firebase/app": "18.6.1",
    "@react-native-firebase/crashlytics": "18.6.1",
    "@react-native-firebase/messaging": "18.6.1",
    "@react-native-firebase/perf": "18.6.1",
    "@react-native-firebase/remote-config": "18.6.1",
    "@react-native-google-signin/google-signin": "8.0.0",
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/bottom-tabs": "6.5.11",
    "@react-navigation/native": "6.1.9",
    "@react-navigation/native-stack": "6.9.17",
    "@segment/analytics-react-native": "^2.16.1",
    "@segment/analytics-react-native-plugin-clevertap": "^1.0.3",
    "@segment/analytics-react-native-plugin-device-token": "^1.0.2",
    "@segment/sovran-react-native": "^1.0.4",
    "@sentry/react-native": "5.19.3",
    "@shopify/flash-list": "^1.4.2",
    "@shopify/restyle": "2.0.0",
    "@sparkfabrik/react-native-idfa-aaid": "0.8.3",
    "@stomp/stompjs": "6.1.0",
    "@welldone-software/why-did-you-render": "7.0.1",
    "@xstate/react": "1.5.1",
    "axios": "1.3.4",
    "base-64": "1.0.0",
    "buffer": "6.0.3",
    "clevertap-react-native": "^2.2.1",
    "d3-shape": "3.0.1",
    "date-fns": "2.22.1",
    "dayjs": "1.10.6",
    "deprecated-react-native-prop-types": "4.1.0",
    "emittery": "0.9.2",
    "formik": "2.4.5",
    "fuse.js": "6.4.6",
    "jail-monkey": "2.8.0",
    "jwt-decode": "3.1.2",
    "lottie-react-native": "^6.4.0",
    "moti": "0.27.2",
    "pluralize": "8.0.0",
    "pubsub-js": "1.9.3",
    "qrcode": "^1.5.3",
    "qs": "6.10.3",
    "rambda": "6.7.0",
    "react": "18.2.0",
    "react-content-loader": "6.0.3",
    "react-native": "0.72.8",
    "react-native-actions-shortcuts": "1.0.1",
    "react-native-add-calendar-event": "4.0.0",
    "react-native-android-location-enabler": "1.2.2",
    "react-native-appsflyer": "^6.12.2",
    "react-native-autolink": "4.0.0",
    "react-native-background-actions": "^4.0.1",
    "react-native-background-timer": "^2.4.1",
    "react-native-biometrics": "3.0.1",
    "react-native-blob-util": "^0.19.11",
    "react-native-bootsplash": "5.1.1",
    "react-native-calendars": "1.1284.0",
    "react-native-camera": "4.2.1",
    "react-native-collapsible-tab-view": "^6.2.1",
    "react-native-config": "1.5.1",
    "react-native-contacts": "7.0.2",
    "react-native-dash": "0.0.11",
    "react-native-date-picker": "4.3.3",
    "react-native-device-info": "8.7.1",
    "react-native-document-picker": "^8.1.1",
    "react-native-email-link": "1.12.2",
    "react-native-fast-image": "8.6.3",
    "react-native-fs": "2.18.0",
    "react-native-geolocation-service": "5.3.1",
    "react-native-gesture-handler": "2.13.4",
    "react-native-get-random-values": "^1.9.0",
    "react-native-haptic-feedback": "2.2.0",
    "react-native-head-tab-view": "^4.0.0-rc.13",
    "react-native-hyperkyc-sdk": "0.20.1",
    "react-native-hyperlink": "0.0.19",
    "react-native-image-picker": "5.7.0",
    "react-native-in-app-review": "4.3.1",
    "react-native-inappbrowser-reborn": "3.7.0",
    "react-native-intersection-observer": "0.0.8",
    "react-native-keyboard-aware-scroll-view": "0.9.5",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-localize": "2.1.1",
    "react-native-mail": "6.1.0",
    "react-native-markdown-display": "7.0.0-alpha.2",
    "react-native-mmkv": "2.11.0",
    "react-native-mmkv-flipper-plugin": "1.0.0",
    "react-native-network-info": "5.2.1",
    "react-native-network-logger": "^1.16.1",
    "react-native-orientation-locker": "^1.5.0",
    "react-native-pager-view": "^6.2.3",
    "react-native-pdf": "^6.7.1",
    "react-native-permissions": "3.6.1",
    "react-native-progress": "4.1.2",
    "react-native-progress-circle": "^2.1.0",
    "react-native-progress-wheel": "^1.0.5",
    "react-native-push-notification": "8.1.1",
    "react-native-qrcode-svg": "6.1.1",
    "react-native-razorpay": "^2.3.0",
    "react-native-reanimated": "3.5.4",
    "react-native-reanimated-carousel": "3.5.1",
    "react-native-redash": "16.2.2",
    "react-native-safe-area-context": "4.7.4",
    "react-native-screens": "3.31.1",
    "react-native-segmented-control-tab": "4.0.0",
    "react-native-sensitive-info": "5.5.8",
    "react-native-share": "10.2.1",
    "react-native-signature-canvas": "^4.4.1",
    "react-native-simple-crypto": "0.2.15",
    "react-native-sms": "1.11.0",
    "react-native-snap-carousel": "3.9.1",
    "react-native-sound": "0.11.2",
    "react-native-startup-trace": "^0.5.0",
    "react-native-svg": "12.5.1",
    "react-native-svg-charts": "5.4.0",
    "react-native-switch": "2.0.0",
    "react-native-tab-view": "3.5.2",
    "react-native-tab-view-collapsible-header": "^2.0.1",
    "react-native-ticker": "5.0.1",
    "react-native-url-polyfill": "1.3.0",
    "react-native-user-inactivity": "1.2.0",
    "react-native-vector-icons": "8.1.0",
    "react-native-video": "5.2.1",
    "react-native-view-shot": "3.4.0",
    "react-native-webview": "13.6.2",
    "sp-react-native-in-app-updates": "1.4.0",
    "string.prototype.replaceall": "^1.0.6",
    "swr": "1.3.0",
    "text-encoding": "0.7.0",
    "url": "^0.11.0",
    "uuid": "8.3.2",
    "validator": "13.7.0",
    "volt-react-native-sdk": "^1.0.15",
    "xstate": "4.22.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@callstack/repack": "^4.2.0",
    "@datadog/datadog-ci": "^2.37.0",
    "@openapitools/openapi-generator-cli": "2.3.6",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/base-64": "1.0.0",
    "@types/date-fns": "2.6.0",
    "@types/faker": "5.5.7",
    "@types/jest": "26.0.24",
    "@types/lodash": "4.14.172",
    "@types/pluralize": "0.0.29",
    "@types/pubsub-js": "1.8.2",
    "@types/qs": "6.9.7",
    "@types/react": "^18.0.24",
    "@types/react-native": "0.66.5",
    "@types/react-native-background-timer": "^2.0.0",
    "@types/react-native-push-notification": "7.3.3",
    "@types/react-native-share": "3.3.2",
    "@types/react-native-snap-carousel": "3.8.5",
    "@types/react-native-svg-charts": "5.0.12",
    "@types/react-native-vector-icons": "6.4.8",
    "@types/react-native-video": "5.0.9",
    "@types/react-test-renderer": "^18.0.0",
    "@types/uuid": "8.3.1",
    "@types/validator": "13.6.3",
    "@types/victory": "33.1.5",
    "babel-jest": "^29.2.1",
    "babel-loader": "^9.1.3",
    "babel-plugin-module-resolver": "4.1.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "babel-plugin-transform-typescript-metadata": "0.3.2",
    "depcheck": "^1.4.3",
    "eslint": "8.56.0",
    "eslint-plugin-prettier": "5.1.2",
    "factory.ts": "0.5.2",
    "faker": "5.5.3",
    "get-yarn-workspaces": "1.0.2",
    "jest": "^29.2.1",
    "json-merger": "1.1.6",
    "lodash": "4.17.21",
    "metro-react-native-babel-preset": "^0.77.0",
    "patch-package": "6.4.7",
    "postinstall-postinstall": "2.1.0",
    "prettier": "3.1.1",
    "react-native-bundle-visualizer": "3.1.0",
    "react-native-codegen": "0.70.7",
    "react-native-flipper": "^0.164.0",
    "react-native-svg-transformer": "1.0.0",
    "react-test-renderer": "18.2.0",
    "terser-webpack-plugin": "^5.3.10",
    "typedoc": "0.20.37",
    "typescript": "4.8.4",
    "visualize-bundle": "^1.4.0",
    "webpack": "^5.93.0",
    "yargs": "17.0.1"
  },
  "engines": {
    "node": ">=16"
  }

[ayushnathani]

I am able to run the app successfully. But I still need solution for the dynamic imports not working with react navigation. Reproducer - https://github.com/ayushnathani/repackRepro

[jbroma]

Hi @ayushnathani

please refer to this guide here on how to do dynamic imports that result in code splitting: https://re-pack.dev/docs/code-splitting/usage#async-chunks

now, if you don't want code-splitting, and just want to evaluate that module lazily, you can also do that with require but you need to give webpack some context where the module is coming from - please refer to this answer on StackOverflow. In your case it would be something like this, in App.tsx:

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={require('./src/' + HomeScreen).default}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Please also share how you were able to solve the other problem you were having so others might find it in the future and use it as reference, thanks!

[ayushnathani]

The other problem I was facing with import of certain functions/enums was really weird. I was not able to reproduce it in the reproducer and figured that it was something with my project. https://github.com/callstack/repack/issues/689#issuecomment-2290795721 Basically converting an arrow function to normal function fixed it which is strange because I have many arrow functions throughout the app but only this was causing the issue. As there were only couple of blocker issue. I bypassed them by using such alternatives. Couldn't actually get to the bottom of why this is happening