callstack / repack

A Webpack-based toolkit to build your React Native application with full support of Webpack ecosystem.
https://re-pack.dev
MIT License
1.44k stars 104 forks source link

`dev:false` bundle throws error with react-navigation #677

Open rahul-mahato11 opened 1 month ago

rahul-mahato11 commented 1 month ago

Environment

Metro to Repack migration

Description

I am trying to migrate from metro to re-pack to get bundle splitting benefits, I am able to setup the dev environment but somehow the release bundle breaks when opening a screen under react-navigation, If I just remove the navigation wrapper and return a View directly it works fine.

image

Reproducible Demo

here's my package.json dependencies

  "dependencies": {
    "@contentsquare/react-native-bridge": "4.5.1",
    "@gorhom/bottom-sheet": "4.6.3",
    "@gorhom/portal": "1.0.14",
    "@ptomasroos/react-native-multi-slider": "1.0.0",
    "@react-native-async-storage/async-storage": "1.21.0",
    "@react-native-community/cli-platform-ios": "12.2.0",
    "@react-native-community/netinfo": "11.1.1",
    "@react-native-cookies/cookies": "6.2.1",
    "@react-native-google-signin/google-signin": "8.2.1",
    "@react-native-masked-view/masked-view": "0.3.1",
    "@react-navigation/bottom-tabs": "6.4.0",
    "@react-navigation/devtools": "6.0.10",
    "@react-navigation/drawer": "6.6.15",
    "@react-navigation/elements": "1.3.6",
    "@react-navigation/material-top-tabs": "6.3.0",
    "@react-navigation/native": "6.1.9",
    "@react-navigation/stack": "6.3.20",
    "@sanar/react-native-highlight-text": "1.0.2",
    "@sentry/react-native": "5.19.0",
    "@shopify/flash-list": "1.4.2",
    "buffer": "5.2.1",
    "capitalize": "1.0.0",
    "crypto-js": "3.1.9-1",
    "deprecated-react-native-prop-types": "^2.3.0",
    "events": "3.0.0",
    "flux-standard-action": "1.1.0",
    "immutable": "3.8.1",
    "jsencrypt": "^3.3.1",
    "just-extend": "^1.1.22",
    "line-replace": "^2.0.1",
    "lottie-react-native": "6.7.0",
    "prop-types": "15.6.1",
    "quickblox-react-native-sdk": "0.9.4",
    "ramda": "0.24.0",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-calendars": "1.1289.0",
    "react-native-customui": "2.2.4",
    "react-native-date-picker": "4.3.5",
    "react-native-device-info": "10.12.0",
    "react-native-document-picker": "9.3.0",
    "react-native-fast-image": "8.6.3",
    "react-native-fs": "2.20.0",
    "react-native-geolocation-service": "5.1.1",
    "react-native-gesture-handler": "2.14.1",
    "react-native-image-picker": "7.1.0",
    "react-native-linear-gradient": "2.8.3",
    "react-native-modal": "^13.0.0",
    "react-native-network-logger": "1.14.0",
    "react-native-pager-view": "^5.4.25",
    "react-native-reanimated": "3.6.3",
    "react-native-render-html": "6.1.0",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "3.29.0",
    "react-native-select-contact": "1.6.3",
    "react-native-shadow-2": "7.1.0",
    "react-native-share": "10.0.1",
    "react-native-snackbar": "2.7.1",
    "react-native-sound": "0.11.2",
    "react-native-svg": "14.1.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-video": "^5.2.0",
    "react-native-view-shot": "^3.5.0",
    "react-native-webview": "11.23.0",
    "react-native-youtube-iframe": "2.3.0",
    "react-redux": "8.0.2",
    "recyclerlistview": "3.0.5",
    "redux": "4.2.0",
    "redux-actions": "2.6.5",
    "redux-observable": "2.0.0",
    "redux-persist": "6.0.0",
    "redux-thunk": "2.4.1",
    "reselect": "4.1.6",
    "rxjs": "^7.5.6",
    "url": "0.11.0",
    "victory-native": "36.6.8"
  },
  "devDependencies": {
    "@babel/core": "^7.23.2",
    "@babel/eslint-parser": "^7.5.4",
    "@babel/plugin-proposal-decorators": "7.3.0",
    "@babel/plugin-proposal-optional-chaining": "7.10.1",
    "@babel/plugin-transform-modules-commonjs": "^7.24.8",
    "@babel/preset-env": "^7.23.2",
    "@babel/runtime": "^7.20.0",
    "@callstack/repack": "4.1.1",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@rnx-kit/dep-check": "^1.12.20",
    "@testing-library/jest-native": "^5.4.3",
    "@testing-library/react-native": "12.3.2",
    "@types/jest": "29.5.12",
    "babel-eslint": "10.0.3",
    "babel-jest": "29.7.0",
    "babel-loader": "^9.1.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "chalk": "^4.1.2",
    "eslint": "8.19.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-import": "2.29.0",
    "eslint-plugin-jsx-a11y": "6.6.0",
    "eslint-plugin-prettier": "5.1.3",
    "eslint-plugin-react": "7.28.0",
    "eslint-plugin-react-native": "4.0.0",
    "figlet": "^1.6.0",
    "husky": "1.3.1",
    "jest": "29.7.0",
    "jetifier": "1.6.3",
    "lint-staged": "8.1.3",
    "prettier": "3.2.5",
    "prettier-eslint-cli": "3.4.1",
    "react-native-debugger-open": "0.3.19",
    "react-native-flipper": "0.212.0",
    "react-native-flipper-performance-plugin": "0.4.0",
    "react-native-mmkv-flipper-plugin": "^1.0.0",
    "react-native-testing-library": "6.0.0",
    "react-test-renderer": "18.2.0",
    "redux-flipper": "^2.0.2",
    "terser-webpack-plugin": "^5.3.10",
    "ts-loader": "^9.5.1",
    "typescript": "^5.5.4",
    "webpack": "^5.93.0",
    "yargs": "^17.7.2"
  },

webpack.config.js

const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')
const Repack = require('@callstack/repack')
const webpack = require('webpack')
const babelConfig = require('./babel.config')
const { ProgressPlugin } = webpack
/*
  for development mode we need a single bundle,
  for production mode we are splitting bundles
*/

/**
 * 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.netlify.app/
 */

let startTime = Date.now()
let completionPercentage = 0
const handler = (percentage, message, ...args) => {
  // e.g. Output each progress message directly to the console:
  if (percentage === 1) {
    console.info('Build time:', Date.now() - startTime)
  }
  // if (percentage.toFixed(1) > completionPercentage) {
  console.clear()
  console.info(`${(percentage * 100).toFixed(0)}%`, message, ...args)
  // }
}
/**
 * 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`.
 */
module.exports = (env) => {
  const {
    mode = 'development',
    context = __dirname,
    entry = './packages/common/index.js',
    platform = 'android',
    minimize = mode === 'production',
    devServer = undefined,
    bundleFilename = 'undefined',
    sourceMapFilename = undefined,
    assetsPath = undefined,
    reactNativePath = require.resolve('react-native')
  } = env

  let entryPoint = entry

  if (devServer && devServer.hmr) {
    entryPoint = './packages/common/index.js'
  }

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

  process.env.BABEL_ENV = mode

  return {
    mode,
    performance: {
      hints: false
    },
    devtool: false,
    context,
    entry: [
      ...Repack.getInitializationEntries(reactNativePath, {
        hmr: devServer && devServer.hmr
      }),
      entryPoint
    ],
    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: devServer && devServer.hmr ? 'index.bundle' : 'index.[name].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,
      usedExports: false,
      /** 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]?[tj]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(.*[/\\])+@contentsquare[/\\]react-native-bridge/,
            /node_modules(.*[/\\])+@gorhom[/\\]bottom-sheet/,
            /node_modules(.*[/\\])+@gorhom[/\\]portal/,
            /node_modules(.*[/\\])+@ptomasroos[/\\]react-native-multi-slider/,
            /node_modules(.*[/\\])+@react-native-cookies[/\\]cookies/,
            /node_modules(.*[/\\])+@react-native-google-signin[/\\]google-signin/,
            /node_modules(.*[/\\])+@react-native-masked-view[/\\]masked-view/,
            /node_modules(.*[/\\])+@sanar[/\\]react-native-highlight-text/,
            /node_modules(.*[/\\])+@shopify[/\\]flash-list/,
            /node_modules(.*[/\\])+lottie-react-native/,
            /node_modules(.*[/\\])+quickblox-react-native-sdk/,
            /node_modules(.*[/\\])+react-native-customui/,
            /node_modules(.*[/\\])+react-native-fast-image/,
            /node_modules(.*[/\\])+react-native-reanimated/,
            /node_modules(.*[/\\])+react-native-safe-area-context/,
            /node_modules(.*[/\\])+react-native-screens/,
            /node_modules(.*[/\\])+react-native-svg/,
            /node_modules(.*[/\\])+react-native-youtube-iframe/,
            /node_modules(.*[/\\])+victory-*/,
            /node_modules(.*[/\\])+react-freeze/,
            /node_modules(.*[/\\])+@native-html/,
            /node_modules(.*[/\\])+react-native-calendars/,
            /node_modules(.*[/\\])+react-native-date-picker/,
            /node_modules(.*[/\\])+react-native-device-info/,
            /node_modules(.*[/\\])+react-native-geolocation-service/,
            /node_modules(.*[/\\])+react-native-image-picker/,
            /node_modules(.*[/\\])+react-native-linear-gradient/,
            /node_modules(.*[/\\])+react-native-modal/,
            /node_modules(.*[/\\])+react-native-network-logger/,
            /node_modules(.*[/\\])+react-native-pager-view/,
            /node_modules(.*[/\\])+react-native-render-html/,
            /node_modules(.*[/\\])+react-native-select-contact/,
            /node_modules(.*[/\\])+react-native-share/,
            /node_modules(.*[/\\])+react-native-snackbar/,
            /node_modules(.*[/\\])+react-native-sound/,
            /node_modules(.*[/\\])+react-native-simple-biometrics/,
            /node_modules(.*[/\\])+react-native-tab-view/,
            /node_modules(.*[/\\])+react-native-video/,
            /node_modules(.*[/\\])+react-native-view-shot/,
            /node_modules(.*[/\\])+react-native-webview/,
            /node_modules(.*[/\\])+react-native-youtube-iframe/,
            /node_modules(.*[/\\])+@sentry/,
            /node_modules(.*[/\\])+react-native-shadow-2/,
            /node_modules(.*[/\\])+react-native-async-storage[/\\]async-storage/,
            /node_modules(.*[/\\])+react-native-cookies[/\\]cookies/,
            /node_modules(.*[/\\])+react-native-netinfo/,
            /node_modules(.*[/\\])+react-native-masked-view/,
            /node_modules(.*[/\\])+@contentsquare[/\\]react-native-bridge/,
            /node_modules(.*[/\\])+react-native-document-picker/,
            /node_modules(.*[/\\])+react-native-fs/,
            /node_modules(.*[/\\])+redux/,
            /node_modules(.*[/\\])+react-redux/,
            /node_modules(.*[/\\])+recyclerlistview/,
            /node_modules(.*[/\\])+redux-actions/,
            /node_modules(.*[/\\])+redux-observable/,
            /node_modules(.*[/\\])+redux-persist/,
            /node_modules(.*[/\\])+redux-thunk/,
            /node_modules(.*[/\\])+reselect/,
            /node_modules(.*[/\\])+react-native-gesture-handler/,
            /node_modules(.*[/\\])+react-native-flipper/,
            /node_modules(.*[/\\])+react-native-flipper-performance-plugin/,
            /node_modules(.*[/\\])+react-native-mmkv-flipper-plugin/,
            /node_modules(.*[/\\])+react-native-testing-library/,
            /node_modules(.*[/\\])+react-test-renderer/,
            /node_modules(.*[/\\])+redux-flipper/
          ],
          use: {
            loader: '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: {
              // cacheDirectory: path.join(__dirname, 'node_modules/.cache/babel-loader'),
              /** 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, '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
            }
          }
        }
      ]
    },
    plugins: [
      new ProgressPlugin(handler),
      new Repack.RepackPlugin({
        context,
        mode,
        platform,
        entryName: 'main',
        devServer,
        output: {
          bundleFilename,
          sourceMapFilename,
          assetsPath
        },
        extraChunks: [
          {
            // should include _shared_components, _shared_fintech, _shared_vendors
            include: /.*/,
            type: 'local'
          }
        ]
      })
    ]
  }
}
jbroma commented 1 month ago

hey @rahul-mahato11, please try with include: [/node_modules/] so that everything get's transpiled

rahul-mahato11 commented 1 month ago

This doesn't works as it then tries to transpile a library nanoid/non-secure which is included in some other library, and then it throws this

image

nanoid/non-secure/index.cjs

let urlAlphabet =
  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'
let customAlphabet = (alphabet, defaultSize = 21) => {
  return (size = defaultSize) => {
    let id = ''
    let i = size
    while (i--) {
      id += alphabet[(Math.random() * alphabet.length) | 0]
    }
    return id
  }
}
let nanoid = (size = 21) => {
  let id = ''
  let i = size
  while (i--) {
    id += urlAlphabet[(Math.random() * 64) | 0]
  }
  return id
}
module.exports = { nanoid, customAlphabet }
jbroma commented 1 month ago

is this on v4 of Re.Pack?

rahul-mahato11 commented 1 month ago

Yes v4.1.1

jbroma commented 1 month ago

hmm you can try aliasing nanoid/non-secure to point to the entry for react-native which is index.browser.js, let me know if that works - without a full picture I'm only limited to guesswork like this 🤷

jbroma commented 4 weeks ago

Hi @rahul-mahato11,

please try adding type: 'javascript/dynamic' as well, like this:

{
  test: /\.[cm]?[tj]sx?$/,
  include: [/node_modules/],
  use: 'babel-loader',
  type: 'javascript/dynamic'
}
rahul-mahato11 commented 3 weeks ago

Adding type: 'javascript/dynamic' throws a new error while bundling

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
100% 
UnsupportedFeatureWarning: Cannot statically analyse 'require(…, …)' in line 6
    at AMDRequireDependenciesBlockParserPlugin.processCallRequire (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/dependencies/AMDRequireDependenciesBlockParserPlugin.js:326:8)
    at Hook.eval [as call] (eval at create (/Users/rahulmahato/Documents/app-repack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
    at JavascriptParser.callHooksForInfoWithFallback (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:3789:24)
    at JavascriptParser.callHooksForInfo (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:3738:15)
    at JavascriptParser.walkCallExpression (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:3511:26)
    at JavascriptParser.walkExpression (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2924:10)
    at JavascriptParser.walkTerminatingStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2096:32)
    at JavascriptParser.walkReturnStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2103:8)
    at JavascriptParser.walkStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1949:10)
    at JavascriptParser.walkNestedStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1982:8)
    at JavascriptParser.walkIfStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2030:9)
    at JavascriptParser.walkStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1943:10)
    at JavascriptParser.walkStatements (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1809:9)
    at /Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2002:9
    at JavascriptParser.inBlockScope (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:3924:3)
    at JavascriptParser.walkBlockStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1997:8)
    at JavascriptParser.walkStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1913:10)
    at JavascriptParser.walkNestedStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1982:8)
    at JavascriptParser.walkIfStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2030:9)
    at JavascriptParser.walkStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1943:10)
    at JavascriptParser.walkStatements (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1809:9)
    at /Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2002:9
    at JavascriptParser.inBlockScope (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:3924:3)
    at JavascriptParser.walkBlockStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1997:8)
    at JavascriptParser.walkStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1913:10)
    at JavascriptParser.walkNestedStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1982:8)
    at JavascriptParser.walkIfStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2030:9)
    at JavascriptParser.walkStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1943:10)
    at JavascriptParser.walkStatements (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1809:9)
    at /Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2002:9
    at JavascriptParser.inBlockScope (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:3924:3)
    at JavascriptParser.walkBlockStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1997:8)
    at JavascriptParser.walkStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1913:10)
    at /Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2309:10
    at JavascriptParser.inFunctionScope (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:3903:3)
    at JavascriptParser.walkFunctionDeclaration (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2300:8)
    at JavascriptParser.walkStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1940:10)
    at JavascriptParser.walkStatements (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1809:9)
    at /Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2002:9
    at JavascriptParser.inBlockScope (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:3924:3)
    at JavascriptParser.walkBlockStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1997:8)
    at JavascriptParser.walkStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:1913:10)
    at /Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:3420:10
    at JavascriptParser.inFunctionScope (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:3903:3)
    at JavascriptParser._walkIIFE (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:3405:8)
    at JavascriptParser.walkCallExpression (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:3471:9)
    at JavascriptParser.walkExpression (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2924:10)
    at JavascriptParser.walkCallExpression (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:3526:11)
    at JavascriptParser.walkExpression (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2924:10)
    at JavascriptParser.walkTerminatingStatement (/Users/rahulmahato/Documents/app-repack/node_modules/webpack/lib/javascript/JavascriptParser.js:2096:32)
error Command failed with exit code 2.
jbroma commented 3 weeks ago

are you using require with 2 params somewhere in your code? or passing array to require? Perhaps some other dependency in your config has something like this and it's getting picked up, hard to tell

You can try using type: 'javascript/dynamic' on the specified node_modules as before

rahul-mahato11 commented 3 weeks ago

whats the benfit of type: 'javascript/dynamic'?

jbroma commented 3 weeks ago

it labels the module as CJS - since the RN babel preset has a rule to transform everything to CJS it makes sense in this scenario - there are cases where a module might be marked as ESM but it will get transpiled to CJS and errors like exports is not defined might occur.