"Invalid prop data-headlessui-state supplied to React.Fragment. React.Fragment can only have key and children props."

[tordans]

What package within Headless UI are you using?

"@headlessui/react": "0.0.0-insiders.fbad6a9",

What browser are you using?

For example: Chrome

Reproduction URL

I was not able to create a minimal reproduction, yet. Will update once I have one. Wanted to share the issue now so others can search for it and help.

Describe your issue

I am testing React 19, Next 15, React Compiler in our Project. When rendering our app I am getting multiple console errors in the browser like…

Warning: Invalid prop `data-headlessui-state` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.
    at c (webpack-internal:///(app-pages-browser)/./node_modules/@headlessui/react/dist/internal/open-closed.js:17:18)
    at u (webpack-internal:///(app-pages-browser)/./node_modules/@headlessui/react/dist/internal/close-provider.js:13:18)
    at me (webpack-internal:///(app-pages-browser)/./node_modules/@headlessui/react/dist/components/disclosure/disclosure.js:111:24)
    at SelectDatasets (webpack-internal:///(app-pages-browser)/./src/app/regionen/[regionSlug]/_components/SidebarLayerControls/StaticDatasets/SelectDatasets.tsx:32:72)
    at nav
    …

I am seeing the same error with other libraries, so this might be a temporary or a new issue with React 19 or Next 15 or React Compiler.

[RobinMalfait]

Hmm interesting, I'm assuming you are using Headless UI in SelectDatasets. Do you have access to the generated output that the compiler outputs for this file?

[tordans]

I'm assuming you are using Headless UI in SelectDatasets.

Yes, this case is from https://github.com/FixMyBerlin/atlas-app/blob/react-compiler-react-19/src/app/regionen/%5BregionSlug%5D/_components/SidebarLayerControls/StaticDatasets/SelectDatasets.tsx#L1-L8 and starts in the Disclosure. However there are quite a few similar warnings from other components.

Do you have access to the generated output that the compiler outputs for this file?

I am seeing this value 2 on which I assume is the Fragment u:

Any recommendation how to extract the relevant code?

[kuskhan]

I have the same problem. It only occurs only in development mode.

[agusabas]

same issue testing React 19 rc.. waiting for updates!

[6ichem]

Same issue happening in React 19 RC

Solution that worked for me is to add the as="div" prop to the <Disclosure /> component like this: <Disclosure {...rest} as="div">

[yuriiIykyknow]

Same issue happening in React 19 RC

Solution that worked for me is to add the as="div" prop to the <Disclosure /> component like this: <Disclosure {...rest} as="div">

don't work for me

[dwilt]

This is happening to me in "react": 18.3.1 not 19.. just wanted to share. And we're not using the Disclosure component.

[michaelkhalsa]

Thanks @6ichem 
this worked for me as well by adding the as="div" prop to the Disclosure wrapper component.
Wanted to add, that on React 18.2

[DaanBiesterbos]

This error is very annoying........ I hope it gets fixed soon. Using NextJS 15 and React 18. This is not workable.

[xsjcTony]

Happening in React 19 with Vite 6, happening in Listbox. Using as="div" resolved the issue, but Idk whether there's any side effect