search

tailwindlabs / headlessui

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

Incompatible with React 19 due to use of `__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED` #3167

Closed short-dsb closed 4 months ago

short-dsb commented 5 months ago

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 4 months ago

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 😅

eps1lon commented 4 months ago

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.

RobinMalfait commented 4 months ago

This should be fixed by #3254, and will be available in the next release.

You can already try it using:

Thanks @eps1lon for the PR!

short-dsb commented 4 months ago

Thanks, @eps1lon!

tangye1234 commented 2 months ago

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 2 months ago

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.

logemann commented 1 month ago

@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