Invalid hook call

[sneddonisaac]

Seems to be almost any component that contains popover??

Server Error
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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

only happens when using a popover element from your headlessui selection - not actually sure what the issue is as I use your components all the time and never get this issue - I have been trying to replicate on other sites I was building but can't get it to replicate anywhere else but no matter how many times I restart this element on the specific site it just won't fix at all :/

Steps to reproduce the behavior:
use any of the elements with popover components and then using dev server it presents with the issue above (very sorry am unsure if this will even replicate on something else as I haven't been able to!!)

Server Error
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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Browser/Device (if applicable)
safari, macOS (Monterey)

I went through the react docs and the only applicable invalid hook call scenario was the second (rules of hooks) I isolated your code on a separate file to check if it was just me being a prat but I couldn't get it to replicate with only my code (tried it completely separate and it still ran the same error) unsure if you have had anyone have this issue before but if you have let me know if you know how to fix :)))) thank you for your time!!

p.s. I love tailwind css / ui and this is nothing on you on the team as a whole - thanks for your help in advance :)

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Can you somehow create a minimal reproduction repo and share it? I've seen this error popup a few times, and the error is usually not an invalid hook call, but rather this part You might have more than one copy of React in the same app. Are you using yarn workspaces by any chance?

[sneddonisaac]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Can you somehow create a minimal reproduction repo and share it? I've seen this error popup a few times, and the error is usually not an invalid hook call, but rather this part You might have more than one copy of React in the same app. Are you using yarn workspaces by any chance?

Hiya, im using yarn yeah, but have removed react/react-dom and reinstalled and checked all versions of react within the project? is this still the case?

[reinink]

Hey @sneddonisaac, is this still can issue for you? If it is, can you provide a minimal reproduction repo and share it? It's very hard for us to help diagnose these issues without one. Thanks! 👍

[sneddonisaac]

Will try and get one to you within the next few days

[reinink]

Hey @sneddonisaac, I've moved this over to the Headless UI discussions, as I don't think this is actually a Tailwind UI specific issue. Please just ping me or @RobinMalfait if you have a reproduction repo setup, and I'd be happy to have another look. 👍

[Restuta]

I have a way to reproduce this that is not super minimal, but it works:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
npm install @headlessui/react @heroicons/react

then we just copy pasted code from https://tailwindui.com/components/application-ui/application-shells/stacked

I can provide minimal repo example, if that is helpful @reinink @RobinMalfait

But basically it doesn't seem to work well with Next.js

[Restuta]

It seems to me that the issue is within Disclosure component from @headlessui/react

[Restuta]

Okay I figured it out, I don't know what happened, but somehow headlessui/react was not in package.json after running npm install @headlessui/react @heroicons/react.

[nooxx]

@Restuta How did you solve it?

I have the same issue, running npm install @headlessui/react @heroicons/react does not install them

(npm v8.1.3, node 16.0.0)

[msafi]

I was running npm install in the wrong directory.

Cheers 🍻

[TheCsarbeat]

Omg, I'm such an idiot, I also installed headlessui in the wrong directory xd. Thanks so much guys