tailwindlabs
Incompatible with React 19 due to use of `__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
v1.7.19
What browser are you using?
N/A
Reproduction URL
https://github.com/search?q=repo%3Atailwindlabs%2Fheadlessui%20__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED&type=code
Describe your issue
Our organization is attempting to use the React 19 beta for our internal tools to get ahead of the upgrade for production. However, we encountered a blocking issue with @headlessui/react.
The useStableCollectionKey method uses SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED which was renamed in React 19 to __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.
This results in runtime and build issues when attempting to use @headlessui/react, like this one:
Attempted import error: 'SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' is not exported from 'react' (imported as 'r').
I get this same build issue with Next 14.3.0 & React 18.3.1 as well fwiw:
Creating an optimized production build ...
Failed to compile.
./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@headlessui/react/dist/utils/stable-collection.js
Attempted import error: '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' is not exported from 'react' (imported as 'r').
The error made me smile at least - I hope you don't get fired 😅
Heads up that switching to the new "get owner" API in the internals is not sufficient since getting the owner is now dev-only. useStableCollectionKey sounds like it's for production as well so this API probably needs a redesign.
Would love to understand what the high-level goal of this PR is. Maybe there's another way to achieve the same thing or something React should provide.
This should be fixed by #3254, and will be available in the next release.
You can already try it using:
-
npm install @headlessui/react@insiders.
Thanks @eps1lon for the PR!
Insiders is yet not fully react19 compatible.
Dropdown component:
warning: Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.
warning: Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.
This is a dev only warning. It has no impact on dev or prod behavior. Though this warning should be fixed. Radix UI uses a pattern that triggers no warning with React 19 and earlier: https://github.com/radix-ui/primitives/pull/2934#discussion_r1625825574
@tangye1234 I suggest opening a new issue. Closes issues are sometimes no longer watched.
@RobinMalfait
hmmm. Still get the error
./node_modules/nextra/node_modules/@headlessui/react/dist/utils/stable-collection.js
Attempted import error: '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' is not exported from 'react' (imported as 'r').
even though i used insiders which points to "0.0.0-insiders.a08be96" in my package.json.
Any more hints ? Thanks.
UPATE: Sorry for the nois, the problem is that Nextra, a documentation project also used in my project is using another version of headlessui, so i have two version in my packages and the latter makes the problem. I think i will somehow manage to tell Nextra to use also the newest headlessUI
