React-Select imports fail with Typescript

Question

Trying to get set up with React-Select. It works fine in a standard React project, but not a Typescript React project (both using Create-React-App with webpack).

In my typescript project, it says "Select" is not exported. I can choose "SelectBase" but that doesn't work as expected.

Steps taken: I install react-select and @types/react-select via npm.

In my component, when trying to import Select from 'react-select, I get typescript squiggly underline on "Select", with errors (see below).

Configuration used:

npm install --save react-select
npm install --save-dev @types/react-select

import Select from 'react-select';  (errors here)

Errors:

Module '"../../...project.../node_modules/@types/react-select"' has no exported member 'Select'.      ts(2305)


Module '"c:/...project.../node_modules/@types/react-select/index"' has no exported member 'Select'.      ts(2305)

The documentation only shows installation using yarn, but I figured npm would be OK too. Do I need to configure this differently? Thanks

Answer 1

If you have issues when importing import { components, ControlProps, Props, Select, StylesConfig, } from "react-select"; it is because Select is the default export of react-select, it can be fixed by doing import Select, { components, ControlProps, Props, Select, StylesConfig, } from "react-select";.