Unhandled js exception [Reanimated]

[songdedku]

Describe the bug

System Info

rules: [
        {
          test: /\.[cm]?[jt]sx?$/,
          include: [
            // Include all node_modules except localforage
            /node_modules(?!\/localforage)/,
          ],
          // include: [
          //   /node_modules(.*[/\\])+react/,
          //   /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(.*[/\\])+nativewind/,
          //   /node_modules(.*[/\\])+axios/,
          //   /node_modules(.*[/\\])+semver/,
          //   /node_modules(.*[/\\])+nonaid/,
          //   /node_modules(.*[/\\])+superstruct/,
          //   /node_modules(.*[/\\])+@sentry/,
          //   /node_modules(.*[/\\])+@firebase/,
          //   /node_modules(.*[/\\])+lottie-react-native/,
          // ],
          // include: /node_modules/, // Include all files in node_modules
          use: 'babel-loader',
          type: 'javascript/dynamic',
        },
        {
          test: /\.[jt]sx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              plugins:
                devServer && devServer.hmr
                  ? ['module:react-refresh/babel']
                  : undefined,
            },
          },
        },
        {
          test: /\.tsx?$/,
          use: [
            {
              loader: 'ts-loader',
              options: {
                transpileOnly: true,
              },
            },
          ],
        },
        {
          test: /\.(js|jsx)$/, // Matches .js and .jsx files
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
              plugins: ['@babel/plugin-transform-runtime'],
            },
          },
        },
        {
          test: /\.lottie$/,
          type: 'asset/resource',
        },
        {
          test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS),
          use: {
            loader: '@callstack/repack/assets-loader',
            options: {
              platform,
              devServerEnabled: Boolean(devServer),
              scalableAssetExtensions: Repack.SCALABLE_ASSETS,
            },
          },
        },
      ],

Re.Pack Version

4.2.0

Reproduction

No response

Steps to reproduce

No response

[songdedku]

my babel config module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ [ 'babel-plugin-root-import', { rootPathPrefix: '~', rootPathSuffix: 'src', }, ], 'nativewind/babel', 'react-native-reanimated/plugin', [ '@babel/plugin-transform-class-properties', {loose: true}, // Ensure loose mode is set to true ], [ '@babel/plugin-transform-private-methods', {loose: true}, // Ensure loose mode is set to true ], [ '@babel/plugin-transform-private-property-in-object', {loose: true}, // Ensure loose mode is set to true ], ], };

[jbroma]

Hi @songdedku,

please provide a minimal reproduction repository where the error is happening, otherwise I won't be able to help you with this issue.

[songdedku]

error when I have import react-native-reanimated-carousel or @react-navigation/drawer on screen @jbroma

[jbroma]

@songdedku please make a repo that I can clone so I can help you, thanks!

[songdedku]

I think it might be because of this warning.

https://github.com/songdedku/testRepack.git @jbroma , thanks!

[songdedku]

I'm tired of fixing it. Please help me. Thank you. @jbroma

[artus9033]

Hi @songdedku, we investigated your issue. The warning you mentioned is harmless, however, there exist a few problems in your setup:

• In webpack.config.mjs#136-143 you are overriding the default values for the container's react & RN packages based on a STANDALONE env var you are loading. If you start the project using the start command defined in package.json, it will not evaluate to true, effectively making react & RN eager: false, which is prohibited as mentioned in the docs in the Limitations section. Since React Native requires JavaScript code to synchronously perform initialization, it would break its initialization. To fix the start command, you should prefix the start script with STANDALONE=1 or STANDALONE=true. RN CLI also launches the bundler automatically if you run the app without having run the bundler beforehand, causing it to also run with the STANDALONE env var not being defined - thus, you should properly handle that in the code.
• Upgraded react-native-gesture-handler to 2.19.0
• You are missing a required reanimated library setup step: to add plugins: ['react-native-reanimated/plugin'], to you babel.config.js.

After applying both changes, running the start script first and then the app, your project worked properly.