tailwindlabs/headlessui

Incompatible with React 19 due to use of `__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`

short-dsb opened this issue · 7 comments

short-dsb commented

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').

Xexr commented

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/@headlessui+react@2.0.3_react-dom@18.3.1_react@18.3.1/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 😅

  • 😄1
eps1lon commented

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.

  • 👍1
RobinMalfait commented

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!

  • 👍6
short-dsb commented

Thanks, @eps1lon!

tangye1234 commented

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.

eps1lon commented

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: radix-ui/primitives#2934 (comment)

@tangye1234 I suggest opening a new issue. Closes issues are sometimes no longer watched.

  • 👍1
logemann commented

@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