Crash on android using yarn workspaces monorepo

[Bushuo]

Description

Hi, first of all thank you for your great work and this great library. This is my first issue on github

I tried to get the example from the reanimated2-playground repo working in a monorepo. When launching the app on android-emulator or my development device the app crashes.

Screenshots

no screenshots, as the app immediately crashes

Steps To Reproduce

1. clone the repo
2. run yarn from the root directory
3. start react-native

Expected behavior

The example works

Actual behavior

The app crashes

Snack or minimal code example

minimal repo to reproduce this here https://github.com/Bushuo/reanimated2-monorepo-crash

Here are logs from adb logcat
The full log can be found here https://github.com/Bushuo/reanimated2-monorepo-crash/blob/master/abd-logcat-crash.txt I think the relevant part is:

12-07 09:35:11.033  2403  2403 I HermesVM: TypeError: Cannot delete property 'callback' of undefined  
12-07 09:35:11.033  2403  2403 I HermesVM:     at decorateAnimation (JavaScript:1:276)  
12-07 09:35:11.033  2403  2403 I HermesVM:     at decorateAnimation (native)  
12-07 09:35:11.033  2403  2403 I HermesVM:     at _f (JavaScript:1:243)  
12-07 09:35:11.033  2403  2403 I HermesVM:     at defineAnimation (JavaScript:1:624)  
12-07 09:35:11.033  2403  2403 I HermesVM:     at defineAnimation (native)  
12-07 09:35:11.033  2403  2403 I HermesVM:     at withTiming (JavaScript:1:120)  
12-07 09:35:11.033  2403  2403 I HermesVM:     at withTiming (native)  
12-07 09:35:11.033  2403  2403 I HermesVM:     at _f (JavaScript:1:93)  
12-07 09:35:11.033  2403  2403 I HermesVM:     at _f (native)  
12-07 09:35:11.033  2403  2403 I HermesVM:     at styleUpdater (JavaScript:1:234)  
12-07 09:35:11.033  2403  2403 I HermesVM:     at styleUpdater (native)  
12-07 09:35:11.033  2403  2403 I HermesVM:     at _f (JavaScript:1:113)  
12-07 09:35:11.033  2403  2403 I HermesVM:     at _f (native)
12-07 09:35:11.036  2403  2403 F libc    : Fatal signal 6 (SIGABRT), code -6 in tid 2403 (imated2monorepo)

If you check out the commit history I tried it with alpha9.2 as well.
Before adding any code from reanimated it also works as intended.

Package versions

• React: 16.13.1
• React Native: 0.63.3
• React Native Reanimated: 2.0.0-rc.0
• NodeJS: v12.14.1

[github-actions[bot]]

Issue validator - update # 1

Hello! Congratulations! Your issue passed the validator! Thank you!

[jakub-gonet]

Related to #858.

[Bushuo]

I fixed my issue by pinning the version of metro-react-native-babel-preset to 0.58.0.

somehow in the root node_modules, there was preset with version 0.59.0 and in my apps node_modules there was version 0.58.0

after that, it just worked. For anyone having a similar issue: Make sure that everything inside of node_modules of the react-native app is hoisted to the root node_modules

Should I close this then?

EDIT: sadly the fix in the MVE repo did not help in my private repo, where I initially encountered it. It still crashes with the Cannot delete property 'callback' of undefined

How should I approach this, to find the cause? I am now trying to reproduce it again in the MVE repo

EDIT2: I managed to reproduce the crash. If I alter the metro.config.js like this, needed because of react-native-svg-transformer, it crashes

const {getDefaultConfig} = require('metro-config');
const path = require('path');

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();
  return {
    //Relative path to packages directory because yarn workpspaces
    projectRoot: path.resolve(__dirname, '..', '..'),
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

I narrowed it down to the line

babelTransformerPath: require.resolve('react-native-svg-transformer')

[Bushuo]

I found a workarround for this issue. See https://github.com/kristerkari/react-native-svg-transformer/issues/113