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

Incompatible with React 19 due to use of __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED #3167

Closed
Tracked by #111
short-dsb opened this issue May 2, 2024 · 4 comments · Fixed by #3254
Closed
Tracked by #111

Comments

@short-dsb
Copy link

short-dsb commented May 2, 2024

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

Xexr commented May 8, 2024

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

eps1lon commented May 13, 2024

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
Copy link
Collaborator

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!

@short-dsb
Copy link
Author

Thanks, @eps1lon!

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

Successfully merging a pull request may close this issue.

4 participants