search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.05k stars 1.03k forks source link

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

Open tordans opened 4 days ago

tordans commented 4 days ago

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 commented 4 days ago

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 commented 4 days ago

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:

image

Any recommendation how to extract the relevant code?