Yarn Workspaces and reactJS Invalid Hook call

[yehonadav]

Having a lot of trouble trying to set up a common UI library.

I've set up a yarn workspace which looks like this:

/monorepo
   /common-16.13
   /react-app-16.8.
   /another-app-16.13

I then import common-16.13 into react-app-16.8 and use one of the components like this:

 /react-app/home.js
    import {SharedComponent} from "common"

However when I run the application I get this error:

react.development.js?80c6:1465 Uncaught 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

after exporting my common package to a different repo (not using yarn workspace) everything works fine.

more information about my issue can be found here:
https://stackoverflow.com/questions/61263658/yarn-workspaces-and-invalid-hook-call

[merceyz]

This is a limitation of how the node_modules layout works and not a bug in Yarn as https://stackoverflow.com/a/65612381/2923845 suggests. There is currently no way for Yarn to represent that dependency layout on disk so the way to get around this is to add a webpack alias on react in both of your apps so you can enforce a single version.

Do note that Yarn PnP is perfectly able to represent this layout as it doesn't suffer from the same limitations as node_modules does. https://yarnpkg.com/getting-started/migration

Looking at the stackoverflow issue I see you have a webpack alias on react in react-app but you're bundling common so it will have it's own copy of react either way, avoid bundling common and it should work