Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Headless UI transitions and dialog not working on react 18

See original GitHub issue

Hello all! Just FYI, headlessUI transitions and dialogs don’t work with react 18 beta:

"@headlessui/react": "^1.4.2",
"next": "^12.0.2",
"next-seo": "^4.28.1",
"react": "^18.0.0-rc.0-next-ceee524a8-20211217",
"react-dom": "^18.0.0-rc.0-next-ceee524a8-20211217",

A quick way to check it.

clone https://github.com/ixartz/Next-js-Boilerplate
yarn add @headlessui/react @next
Add this somewhere in the index

  const [isShowing, setIsShowing] = useState(false)
 ....

        <button onClick={() => setIsShowing((isShowing) => !isShowing)}>
          Toggle
        </button>

        <Transition show={isShowing}>I will appear and disappear.</Transition>

Test the toggle => it works
update to react 18 beta => yarn add react-dom@next; yarn add react@next
Now toggle does not work

Issue Analytics

State:
Created 2 years ago
Reactions:9
Comments:10

Top GitHub Comments

1reaction

byamasu-patrickcommented, Apr 18, 2022

Try to disable strict mode, I had the same issue too. But I resolved it by disabling the react strict mode

1reaction

RobinMalfaitcommented, Jan 19, 2022

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

We haven’t worked on React 18 support yet since this also introduces breaking changes. Will close this in favor of a tracking issue for React 18: https://github.com/tailwindlabs/headlessui/issues/681