react-select/async and Typescript

[peterrogov]

Hi!

I can't seem to find a proper way to resolve this issue. When I try to import Async select I get a following TS error.

import SelectAsync from 'react-select/async';

Error:

Could not find a declaration file for module 'react-select/async'. '/node_modules/react-select/async/dist/react-select.cjs.js' implicitly has an 'any' type.ts(7016)

I found a couple of old threads online with the similar issue but none of the suggestions there could help. Any ideas how to resolve this?

Relevant packages from package.json:

"react-select": "^3.0.3",
"typescript": "^3.4.5",
"@types/react-select": "^2.0.19"

[peterrogov]

I've currently downgraded react-async to v.2.4.4 which seems to be compatible with existing type definitions from @types/react-select. I believe it makes sense to place a notice somewhere that latest version 3.0.3 is not fully compatible with TypeScript out of the box.

[StanBright]

I tried using the existing type definitions with the new v3; however, without much success. I spent an hour or two and could make it work. I'lll postpone upgrading for now.

[justingrant]

@StanBright and others looking for a TS workaround, here's what I did to solve this problem for react-select/creatable. You should be able to do something similar for react-select/async:

1. Create a node_modules subfolder in my src folder. (not a typo-- put it inside your /src folder because you'll want to check it into git!)
2. Create a ./src/node_modules/react-select folder
3. Create a ./src/node_modules/react-select/creatable folder
4. Add a typings file in that folder: ./src/node_modules/react-select/creatable/index.d.ts and populate it with this content: _EDIT: added one more line to handle non-default exports (thanks @dhruvio!)_

import Creatable from 'react-select/lib/Creatable';
export * from 'react-select/lib/Creatable';
export default Creatable;

Doing this enables imports like this to work:

import Select from 'react-select/creatable';
import { Props as SelectProps } from 'react-select/creatable';

Once the 3.0 typings are populated in DefinitelyTyped, you should be able to remove this hack.

[dhruvio]

@justingrant Thanks, your workaround solved the problem I was having with importing react-select/creatable. However, I recommend changing the contents of creatable/index.d.ts to the following:

import Creatable from 'react-select/lib/Creatable';
export * from 'react-select/lib/Creatable';
export default Creatable;

[justingrant]

@dhruvio - oops, you're right! I forgot the non-default exports. I edited my post to use your .d.ts content instead so lazy people who don't keep reading after my post will still get the right typings. ;-)

[martinratinaud]

Or if you have a index.d.ts file or declaration.d.ts file included in your tsconfig.json

"files": ["src/declaration.d.ts"],

You can add the following

declare module 'react-select/creatable' {
  import Creatable from 'react-select/lib/Creatable';
  export * from 'react-select/lib/Creatable';
  export default Creatable;
}

declare module 'react-select/async' {
  import Async from 'react-select/lib/Async';
  export * from 'react-select/lib/Async';
  export default Async;
}

Seems to be working

[dhruvio]

So, who's going to be the first person to create a PR for the react-select declaration files in DefinitelyTyped? 😛

[martinratinaud]

@dhruvio I would but am not sure about how DefinitelyTyped works

Do you have any experience in updating it ?

[dhruvio]

Never done it before, although I can give it a go. A little swamped at the moment, so not sure if I'll be able to provide a solution quickly. That said, I'll add it to my to-do list.

[Methuselah96]

I made a PR to update the types: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/36464.

[teebot]

Thank you so much for this @Methuselah96 ! import AsyncSelect from "react-select/async"; works like a charm.

[goodwin64]

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/36464 is merged, this issue could be closed

[dhruvio]

Awesome, thank you @Methuselah96 !!

[dehghani-mehdi]

I don't use TypeScript and it happens to me, I installed v2.4.4

[volkanunsal]

I have the same problem in Flow. Does anyone know if there are typedefs for Flow?

[caoduy1293]

I don't use TypeScript and it happens to me, I installed v2.4.4

import AsyncSelect from "react-select/async";only available in v3.0.0
v2.4.4 use this: import AsyncSelect from "react-select/lib/Async";

[bladey]

Hi all,

In an effort to sustain the react-select project going forward, we're closing issues that appear to have been resolved via community comments or issues that are now redundant based on their age.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you, and we'll re-open it if necessary.