react-native
react-native copied to clipboard
storybookjs
Invalid hook call error when adding @storybook/react-native to a yarn workspace monorepo
We have a react native project as part of a yarn workspace monorepo. However when we add the library @storybook/react-native the app crashes on startup with the dreaded INVALID HOOK CALL error from React (https://reactjs.org/warnings/invalid-hook-call-warning.html).
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
This is due to duplicate versions of React been loaded as React is defined as a dependency in @storybook/api.
Has anyone managed to get storybook working as part of a monorepo? I have tried using different variations of "nohoist" but had no joy in solving the issue.
@walterholohan @dannyhw have you arrived at some solution? Dealing with same error
It's hard to know what the issue is without seeing the code, I use storybook in a yarn workspace monorepo in two separate projects. Usually the problem is more generally to do with react native/metro configuration than with storybook.
The solution we arrived on was to remove the monorepo structure. As Danny mentioned above it was something to do with hoisting react versions and using metro bunder. We found our monorepo structure with RN and React web was getting harder and harder to add new libraries so we decided to scrap the monorepo approach all together. We have been very happy ever since.
There are ways to make it work but it can be difficult sometimes because metro doesn't support symlinks and so you end up kind of fighting with metro to get things working
The solution we arrived on was to remove the monorepo structure. As Danny mentioned above it was something to do with hoisting react versions and using metro bunder. We found our monorepo structure with RN and React web was getting harder and harder to add new libraries so we decided to scrap the monorepo approach all together. We have been very happy ever since.
Agreed. I arrived at the same conclusion after days worth of work, and that was just migrating the project to monorepo. RN is not there yet for supporting monorepos.
