React Select Version > 5.0.0 is incompatible with other libraries

[stanley355]

Are you reporting a bug or runtime error?

A bug: Installed JSX components can't be used after installing React-select
How to reproduce:

• Create next.js App with typescript
• Install React select with version > 1.27.6 as for me I installed 1.28.1
• Install library pure-react-carousel (newest)
• Create a simple Carousel Component import and use the following component to your carousel component:
  
• The issue will come out some third party component can't be used as JSX element:
  E.g my carousel component
  

And for the next.js built in component will get similar error:

Anybody having similar issue?

[Methuselah96]

Sounds like you have two copies of @types/react installed. Usually the easiest way to resolve this is to delete your package lock file and re-install your packages.

[stanley355]

Sounds like you have two copies of @types/react installed. Usually the easiest way to resolve this is to delete your package lock file and re-install your packages.

I've tried removing my node-modules and yarn lock file, and yarn install yet the issue persists

[Methuselah96]

The issue is that you have multiple copies of @types/react installed. I would recommend looking in your yarn.lock to see what those copies are. If the two copies are @types/react 17 and 18, you need to follow the steps here.

[mikefarquhar]

Also had fun with this issue this morning.

react-select depends on react-transition-group which has a dependency on @types/react: * (so version 18 as it's the latest). This turns out to be fine if running NPM v8 (probably also 7?), but causes the above issue when installing with NPM <= 6.

If it's not possible to upgrade your NPM version I can confirm that react-select v5.1.0 (haven't checked anything above that) works fine with TypeScript and NPM v6.

There's an issue over on react-transition-group for further reference, but it looks to me like they've mistakenly installed to dependencies rather than devDependencies.

[Methuselah96]

It's not a mistake, @types/react-transition-group does correctly depend on @types/react. See facebook/react#24304, facebook/react#24304 (comment), and microsoft/DefinitelyTyped-tools#433 for more details. Closing this since this is not an issue with react-select.