treeShaking causing a crash with react-native-reanimated

Question

treeShaking causing a crash with react-native-reanimated

adamivancza opened this issue a year ago · 9 comments

What happened?

When I enable treeShaking in bundler settings our app crashes inside react-native-reanimated's code. When I disable it everything works fine.

It crashes here:
reanimated::LayoutAnimationsManager::startLayoutAnimation(facebook::jsi::Runtime&, int, LayoutAnimationType, facebook::jsi::Object const&)

jsi::Function startAnimationForTag =
      layoutAnimationRepositoryAsValue.getObject(rt).getPropertyAsFunction(
          rt, "start");

Affected Package

rnx-bundle

Version

latest

Which platforms are you seeing this issue on?

Android
iOS
macOS
Windows

System Information

System:
  OS: macOS 13.5.1
  CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Memory: 59.75 MB / 32.00 GB
  Shell:
    version: 3.2.57
    path: /bin/bash
Binaries:
  Node:
    version: 18.17.1
    path: ~/.nvm/versions/node/v18.17.1/bin/node
  Yarn:
    version: 1.22.19
    path: /usr/local/bin/yarn
  npm:
    version: 9.6.7
    path: ~/.nvm/versions/node/v18.17.1/bin/npm
  Watchman:
    version: 2023.10.09.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2021.3 AI-213.7172.25.2113.9123335
  Xcode:
    version: 15.0/15A240d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 15.0.1
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/adamivancza/.rvm/rubies/ruby-3.2.2/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.5
    wanted: 0.72.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Steps to Reproduce

Not entirely sure how to reproduce it - I can try to create a minimal repro project if needed.

Code of Conduct

I agree to follow this project's Code of Conduct

Answer 1 · 2023-10-25T10:36:57.000Z

We'd really appreciate it if you can make a minimal repro.

Answer 2 · 2023-10-25T12:31:52.000Z

I did some further digging into this - seems like it is related to @react-navigation/drawer. When I stripped out the Drawer navigator from our app it is not crashing anymore. I assume they use a condition somewhere in their code which the treeShaking ignores and strips out something that it actually needs from reanimated.
https://reactnavigation.org/docs/upgrading-from-5.x/#drawer-now-uses-reanimated-2-if-available

but still working on the repro project

Answer 3 · 2023-10-25T12:48:20.000Z

When I stripped out the Drawer navigator from our app it is not crashing anymore. I assume they use a condition somewhere in their code which the treeShaking ignores and strips out something that it actually needs from reanimated.

It sounds like @react-navigation/drawer or one of its dependencies are declaring sideEffects: false when they shouldn't. You can try removing the line in package.json to see if it fixes the crash.

Answer 4 · 2023-10-26T07:31:30.000Z

What version of @react-navigation/drawer are you using @adamivancza? Try 6.5.1

Answer 5 · 2023-10-26T17:40:22.000Z

Oh, I think I found the reason - https://github.com/software-mansion/react-native-reanimated/blob/main/package.json
this has some sideEffects here which I assume is web only (based on git blame) so treeshaking excludes some stuff for the app that we would need. after changing that to plain true our app works just fine. Not entirely sure how to proceed after this though. I can't patch package.json via patch-package...

Answer 6 · 2023-10-26T18:44:15.000Z

Oh, I think I found the reason - https://github.com/software-mansion/react-native-reanimated/blob/main/package.json this has some sideEffects here which I assume is web only (based on git blame) so treeshaking excludes some stuff for the app that we would need.

Two things come to mind:

Are the files listed in sideEffects missing in the bundle i.e. is this a bug in our serializer?
If not, should that list include more files? If the sideEffects array is missing files, we should fix that upstream.

Answer 7 · 2023-10-26T19:22:08.000Z

Oh, I think I found the reason - https://github.com/software-mansion/react-native-reanimated/blob/main/package.json this has some sideEffects here which I assume is web only (based on git blame) so treeshaking excludes some stuff for the app that we would need.

Two things come to mind:

Are the files listed in sideEffects missing in the bundle i.e. is this a bug in our serializer?

If not, should that list include more files? If the sideEffects array is missing files, we should fix that upstream.

The sideEffects seems to be completely wrong for react-native as after installing this lib I do not have the listed libraries at all:

Answer 8 · 2023-10-26T19:23:04.000Z

I'm gonna close this one and open a bug report inside react-native-reanimated

Answer 9 · 2023-10-26T19:32:51.000Z

created the bug report: software-mansion/react-native-reanimated#5311