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

Types broken in React@19 & Next@15 #5911

Closed
SaveliiLukash opened this issue Jun 3, 2024 · 4 comments · Fixed by #5974
Closed

Types broken in React@19 & Next@15 #5911

SaveliiLukash opened this issue Jun 3, 2024 · 4 comments · Fixed by #5974
Labels
issue/bug-confirmed Issues about a bug that has been confirmed by a maintainer issue/has-pr Issue has a PR attached to it that may solve the issue

Comments

@SaveliiLukash
Copy link

Issue

After migrating to React@19 & Next@15 as well as types-react@rc & types-react-dom@rc all type declarations for react-select seem to be broken.

Reproduction

  1. Install the project with dependencies: https://github.com/SaveliiLukash/react-select-next-15/tree/main
  2. Note zero IDE prompts for types of <Select /> in ./src/app/page-content.tsx
  3. Run npm run build
  4. Get the error on the screenshot below:

Extra info

My wild guess is that it might have something to do with React removing support for defaultProps and propTypes in v19. Or it might not...

@SaveliiLukash SaveliiLukash added the issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet label Jun 3, 2024
@Methuselah96
Copy link
Collaborator

Thanks for the issue and the sample repo. The issue is actually with the JSX type being removed from the global scope in React 19. I created #5912 with a fix.

Note that you are likely upgrading to React 19 and Next.js 15 too soon. Both of these are still RC/canary releases, so I would recommend waiting until a stable version is released and libraries have time to make any necessary updates.

@Methuselah96 Methuselah96 added issue/bug-confirmed Issues about a bug that has been confirmed by a maintainer issue/has-pr Issue has a PR attached to it that may solve the issue and removed issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet labels Jun 4, 2024
@SaveliiLukash
Copy link
Author

@Methuselah96 Thanks a ton! The second version of our app is in development and is due to release in a few month, so we are lucky to have time and ability to experiment with latest Next & React.

@juandelacruz23
Copy link

Thanks for the issue and the sample repo. The issue is actually with the JSX type being removed from the global scope in React 19. I created #5912 with a fix.

Note that you are likely upgrading to React 19 and Next.js 15 too soon. Both of these are still RC/canary releases, so I would recommend waiting until a stable version is released and libraries have time to make any necessary updates.

Shouldn't a RC be suitable for libraries to start testing the upgrade?

@Methuselah96
Copy link
Collaborator

Methuselah96 commented Jun 10, 2024

We should just be able to release it without it being an RC. The main blocker is that another maintainer needs to approve my PR before it can get merged.

I want to be cautious about merging it since it could technically be considered a breaking change for TypeScript users since it requires a higher version of @types/react than what was previously required. If a stable version of React 19 gets released and there are no other maintainers available to review the PR, then someone else can open a PR with the same changes, and I can review, merge, and release a new version, but I'd prefer to get another maintainer's approval due to the nature of the PR.

If you don't want to wait, as a workaround, you can add JSX to the global scope in your app:

import * as React from 'react';

declare global {
  namespace JSX {
    interface Element extends React.JSX.Element {}
    interface ElementClass extends React.JSX.ElementClass {}
    interface ElementAttributesProperty extends React.JSX.ElementAttributesProperty {}
    interface ElementChildrenAttribute extends React.JSX.ElementChildrenAttribute {}

    type LibraryManagedAttributes<C, P> = React.JSX.LibraryManagedAttributes<C, P>;

    interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {}
    interface IntrinsicClassAttributes<T> extends React.JSX.IntrinsicClassAttributes<T> {}
    interface IntrinsicElements extends React.JSX.IntrinsicElements {}
  }
}

or you can patch react-select locally with the changes from #5912.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue/bug-confirmed Issues about a bug that has been confirmed by a maintainer issue/has-pr Issue has a PR attached to it that may solve the issue
Projects
None yet
3 participants