Recommendation for @headlessui/react in a monorepo setup

[ivan-kleshnin]

I'm trying to use @headlessui for a shared component libary.

ui
  peerDependencies: react, @headlessui/react
  devDependencies: react, @headlessui/react

next-app
  dependencies: react, @headlessui/react
  imports from 'ui' via yarn(1):workspaces

To my understanding, this is the standard way of structuring dependencies: https://stackoverflow.com/questions/30451556/what-is-the-correct-way-of-adding-react-as-a-dependency-in-the-package-json

---

I want to expose ComboInput, ComboButton from the ui folder and assemble them into a SpecialCombobox in next-app. So Combobox parent component gets into next-app while Combobox.Input gets into ui.

As I do that, I'm getting the following error:

Error: <Combobox.Input /> is missing a parent <Combobox /> component.

I have a correct hierarchy and a single React version is used and bundled. The issue is that I end up having 2 different React contexts.

https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/combobox/combobox.tsx#L391

I understand it's not a @headlessui/react issue. I'm interested in how other people workaround such situations in their monorepos?

I find claims that having "the same version of React (etc. deps)" helps, but it does not. The only thing that helped so far is to have a single node_modules/dep-relying-on-react-ctx in the project root. I wouldn't like to pull each library that relies on React context into the project root – our project is barely about web frontend.

[ivan-kleshnin]

Rechecked one more time and noticed that I've missed next-app from the list of workspaces in the root package.json.
After that change (and everything being reinstalled) all related issues are gone.