Monorepo - Multiple versions of Reanimated were detected

[Aure77]

Description

In a monorepo, yarn workspace doesn't hoist react-native-reanimated dependency & duplicate it on each workspace. I don't understand why.

yarn why react-native-reanimated                                                                                              
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "react-native-reanimated"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "react-native-reanimated@3.4.2"
info Reasons this module exists
   - "_project_#app1" depends on it
   - Hoisted from "_project_#app1#react-native-reanimated"
   - Hoisted from "_project_#app2#react-native-reanimated"
   - Hoisted from "_project_#app3#react-native-reanimated"
   - Hoisted from "_project_#storybook#react-native-reanimated"
info Disk size without dependencies: "6.02MB"
info Disk size with unique dependencies: "6.02MB"
info Disk size with transitive dependencies: "6.02MB"
info Number of shared dependencies: 44
✨  Done in 0.56s.

"why" command say that "react-native-reanimated" dep is hoisted. But if I try to find react-native-reanimated into node_modules I found multiple record:

find . -name "react-native-reanimated" -type d                                                                                
./node_modules/react-native-reanimated
./apps/app1/node_modules/react-native-reanimated
./apps/app2/node_modules/react-native-reanimated
./apps/app3/node_modules/react-native-reanimated
./apps/storybook/node_modules/react-native-reanimated

So it's not only hoisted to root node_modules...
I use the exact same version of "react-native-reanimated" in my workspaces (I also try to force resolutions in root package)

If I try to found every ref of this deps, I found that:

grep -R --include="package.json" "react-native-reanimated\":" .  
./node_modules/@react-navigation/drawer/package.json:    "react-native-reanimated": "~2.2.0",
./node_modules/@react-navigation/drawer/package.json:    "react-native-reanimated": ">= 1.0.0",
./node_modules/react-native-reanimated-carousel/package.json:        "react-native-reanimated": "2.8.0",
./node_modules/react-native-reanimated-carousel/package.json:        "react-native-reanimated": ">=2.7.0"
./node_modules/react-native-draggable-flatlist/package.json:    "react-native-reanimated": ">=2.8.0"
./node_modules/react-native-draggable-flatlist/package.json:    "react-native-reanimated": "^2.8.0",
./node_modules/react-native-screens/package.json:    "react-native-reanimated": "^2.2.0",
./node_modules/react-native-gesture-handler/package.json:    "react-native-reanimated": "^2.3.1",
./packages/components/package.json:    "react-native-reanimated": "3.4.2",
./apps/app1/package.json:    "react-native-reanimated": "3.4.2",
./apps/app1/package.json:    "react-native-reanimated": "3.4.2",
./apps/app1/package.json:    "react-native-reanimated": "3.4.2",
./apps/storybook/package.json:    "react-native-reanimated": "3.4.2",

and most of third party libs are referencing react-native-reanimated as peer or dev dependency...

So Why this lib is not hoisted at root ?

Steps to reproduce

1. create a monorepo
2. use react-native-reanimated & lib that dependent on it (ex: react-native-reanimated-carousel)
3. run yarn install
4. check find . -name "react-native-reanimated" -type d output

Snack or a link to a repository

https://github.com/Aure77/react-native-yarn-hoist-issue

Reanimated version

3.4.2

React Native version

0.70.4

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[tjzel]

Hi @Aure77. We do have a GitHub Action that checks if Reanimated builds properly in a monorepo - try to follow the steps we take there and see if it works for you.

[Aure77]

Hi @Aure77. We do have a GitHub Action that checks if Reanimated builds properly in a monorepo - try to follow the steps we take there and see if it works for you.

Monorepo template in action use nohoist workspaces (duplicated deps on each workspace = more disk space / time). This should not be necessary if hoisting is done correctly...

[tjzel]

I can clearly see this part:

Is it doing something else than it's supposed to do?

[Aure77]

I can clearly see this part: Is it doing something else than it's supposed to do?

This seems more a workaround (This add react-native-renanimated dep in root package...)

I also provide a repro project here: https://github.com/Aure77/react-native-yarn-hoist-issue

[tjzel]

I noticed that in your repro there are more duplicated packages than just react-native-reanimated. I tried to find the reason for this but I'm no expert with monorepos so I'm not sure what's the cause of that.

What I noticed is when you remove react-native-reanimated from those extra node_modules and do yarn afterwards react-native-reanimated is not getting reinstalled. Therefore it might be something related to how workspaces work - maybe during the (first) installation yarn doesn't know if other workspaces are going to reuse some of the dependencies and after it installs them only then it decides to hoist them?

Installing react-native-reanimated in root works like a charm there but I understand in some scenarios when you'd use different versions of it throughout the monorepo you'd get errors.

Luckily, the error you refer to will be gone with #4914 and the whole mechanism of duplicate Reanimated detection reworked.

[iskandarzhilmi]

Currently having the same issue, my temporary solution is to use the latest nightly version of 3.6.0-nightly-20231017-bc4d2c4f2

[Latropos]

Closing since #4914 is already merged. In the mentioned PR we get rid of the cumbersome check mentioned which caused this issue.