JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.42k stars 4.1k forks source link

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

Open SaveliiLukash opened 1 month ago

SaveliiLukash commented 1 month ago

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

Methuselah96 commented 1 month ago

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 https://github.com/JedWatson/react-select/pull/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.

SaveliiLukash commented 1 month ago

@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 commented 3 weeks ago

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 commented 3 weeks ago

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 https://github.com/JedWatson/react-select/pull/5912.