React 18 compatibility tracking issue

[RobinMalfait]

Update!

We've applied some fixes in #1326, if you are running into React 18 issues please install the insiders build to see if your issues go away:

• npm install @headlessui/react@insiders
• yarn add @headlessui/react@insiders.

If you are still running into React 18 related issues, please open a new issue with a reproduction repo attached so that we can tackle those issues as well.

---

What package within Headless UI are you using?

@headlessui/react

Describe your issue

Now that React 18 is out, it looks like some people are running into issues. This is because of StrictMode in React that does a few extra things to ensure that your library works with Suspense.

Currently it looks like all our components work fine with React 18, except for the Transition component. It just happens that a lot of people use this component in combination with other components like our Menu or Listbox components.

We are aware of the issues and are working on fixes.

In the meantime, if you need React 18 support, then you can temporarily disable StrictMode. If you are using something like Next.js, then you can disable it like this:

const nextConfig = {
  reactStrictMode: false,
  // ...
};

module.exports = nextConfig;

This workaround is a temporary solution so that you can move forward with your work. StrictMode is a development tool anyway and we are working hard to have compatibility with React 18 really soon.

Edited: 5th of April, 2022

[samselikoff]

Just ran into this, took me a while to trace down! I was seeing a bug in my app - There are no focusable elements inside the .

Here's a repro: https://codesandbox.io/s/headless-ui-react-dialog-react-alpha-pvmd3?file=/src/App.js

Next + react alpha + latest headlessui + strict mode. Clicking the button shows the error - remove strict mode and it works.

[mellson]

I'm also seeing this using strict mode and React 18 RC. Can't use the Menu or Transition components

[matthewlilley]

Yeah, seems to be an issue with React 18 + strict mode. Disabling strict mode solves the issue for now.

[bmichotte]

Now that React 18 is out, I think it's time to bump this issue :D

[lynnntropy]

I think it'd be good to pin this issue now that React 18 is out. Maybe also put a note somewhere on https://tailwindui.com/? I spun up a new Next.js project yesterday and just spent a while debugging why some of my Tailwind UI components were broken 😅

[jlarmstrongiv]

React 18 seems to have broken npm install with peer dependencies:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @reactjs/example@1.0.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"^17.0.2" from @reactjs/example@1.0.0
npm ERR!   packages/reactjs/example
npm ERR!     @reactjs/example@1.0.0
npm ERR!     node_modules/@reactjs/example
npm ERR!       workspace packages/reactjs/example from the root project
npm ERR!   peer react@"^16 || ^17 || ^18" from @headlessui/react@1.5.0
npm ERR!   node_modules/@headlessui/react
npm ERR!     peer @headlessui/react@"^1.5.0" from @reactjs/example@1.0.0
npm ERR!     packages/reactjs/example
npm ERR!       @reactjs/example@1.0.0
npm ERR!       node_modules/@reactjs/example
npm ERR!         workspace packages/reactjs/example from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from react-dom@18.0.0
npm ERR! node_modules/react-dom
npm ERR!   peer react-dom@"^16 || ^17 || ^18" from @headlessui/react@1.5.0
npm ERR!   node_modules/@headlessui/react
npm ERR!     peer @headlessui/react@"^1.5.0" from @reactjs/example@1.0.0
npm ERR!     packages/reactjs/example
npm ERR!       @reactjs/example@1.0.0
npm ERR!       node_modules/@reactjs/example
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See ~/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     ~/.npm/_logs/2022-03-31T02_17_07_266Z-debug.log

EDIT: My bad, if you see this error, then you probably only have react in peerDependencies, where you also need react-dom. Gotta love peer dependencies 💔

[bigint]

It's breaking again, react 18 is out now please make this issue a high priority one 🙏🏻

[martinnabhan]

Not sure how this can be circumvented considering it's the default behaviour of Strict Mode since React 18. We decided to disable Strict Mode for now, but would obviously prefer to keep it enabled.

The announcement says the component will have all of its previous state when it gets remounted, so maybe there is some kind of workaround.

When a component get shown again after being hidden– it’s similar to being mounted again except that it will have all of its previous state.

Also please do keep in mind this only affects development environments, as Strict Mode doesn't run in production mode.

[maggo]

Can confirm this is also breaking in next@12.1.2 with react@18 and reactStrictMode: true setting (which is required to use react 18 features)

[betomoedano]

Work around

• at next.config.js change reactStrictMode: false

const nextConfig = {
  reactStrictMode: false,
};

module.exports = nextConfig;

[sidwebworks]

https://github.com/facebook/react/blob/main/CHANGELOG.md#breaking-changes

Here if we have a look at the Strict Mode section, they talk about
**"components to be resilient to remounting with existing state" **

Which I think just means that it remounts again with the state from the previous unmount.

[MAK-Denis]

Please comment here when it's updated.

[haf]

Without strict mode, next js latest in dev mode, the select menu doesn't show all the items. Going to production mode makes it work again.

[RobinMalfait]

@samselikoff I've updated your CodeSandbox using the latest insiders build which should fix React 18 issues. https://codesandbox.io/s/headless-ui-react-dialog-react-alpha-forked-feooky Thanks for reporting!

[msdrigg]

Any word when we will get a release for this?

[M1ck0]

Works for me with react 18 with insiders version. Version 1.5.0 fo headlessui works only in production and not development.

Is this stable enough for production, or should I revert back to React 17 and Headlessui 1.5.0, or perhaps removing StrictMode

[sapphirecity]

Works for me with react 18 with insiders version. Version 1.5.0 fo headlessui works only in production and not development.

Is this stable enough for production, or should I revert back to React 17 and Headlessui 1.5.0, or perhaps removing StrictMode

i think, swtich off StrictMode on dev & prod. and we just wait until headless updates for react v18!

[timfee]

+1 please to putting a notification on tailwindui.com -- not a super great experience as a paying member for that product to have something not work out of the box. thanks! :)

[bigint]

@RobinMalfait I'm getting this in insiders version 😕

[RobinMalfait]

Hey @bigint, it looks like it is erroring on startTransition which is not something we have in our code anywhere so I doubt that it is Headless UI related. That said, as mentioned in the original issue if you are experiencing any other issues, then please open a new issue with a minimal reproduction repo or CodeSandbox attached.

[ascandella]

Looks like version 1.6.0 was released a couple hours ago including fixes for React 18. Thanks @RobinMalfait and team!

[M1ck0]

There is a problem with 1.6.0 with React 18. I get this error when opening modal.

Uncaught Error: Did you forget to passthrough the `ref` to the actual DOM node?
    at transition.js:1:1
    at commitHookEffectListMount (react-dom.development.js:22969:1)
    at commitPassiveMountOnFiber (react-dom.development.js:24702:1)
    at commitPassiveMountEffects_complete (react-dom.development.js:24666:1)
    at commitPassiveMountEffects_begin (react-dom.development.js:24653:1)
    at commitPassiveMountEffects (react-dom.development.js:24641:1)
    at flushPassiveEffectsImpl (react-dom.development.js:26848:1)
    at flushPassiveEffects (react-dom.development.js:26801:1)
    at performSyncWorkOnRoot (react-dom.development.js:25915:1)
    at flushSyncCallbacks (react-dom.development.js:11982:1)

Reverting back to 1.5.0 fixes the problem.

[RobinMalfait]

@M1ck0 can you open a new issue with a reproduction repo / CodeSandbox attached? Hard to debug otherwise.