Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Tracked by #111
tordans opened this issue Jul 1, 2024 · 2 comments

Comments

@tordans
Copy link
Contributor

tordans commented Jul 1, 2024

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.

@tordans tordans changed the title Invalid prop data-headlessui-state supplied to React.Fragment. React.Fragment can only have key and children props. "Invalid prop data-headlessui-state supplied to React.Fragment. React.Fragment can only have key and children props." Jul 1, 2024
@RobinMalfait
Copy link
Collaborator

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
Copy link
Contributor Author

tordans commented Jul 1, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants