Typescript build error

[KaySchneider]

Hi,
actually i implemented react-select into an typescript application and after adding the needed components for an auto-suggest Element with material-ui, i get this build error from typescript:

ERROR in ./node_modules/react-select/src/components/Menu.js 5:7
Module parse failed: Unexpected token (5:7)

You may need an appropriate loader to handle this file type.
| import {
|   Component,
>   type Element as ReactElement,
|   type ElementRef,
|   type Node,

[HellBrick]

I've encountered a similar issue when TS tooling auto-imported Select from react-select/src/Select, it can be fixed by importing from react-select instead. But the fact that the tooling can be confused like that is somewhat inconvenient =(

[tvedtorama]

I ran into something similar, as:

ERROR in ./node_modules/react-select/src/Select.js
Module parse failed: Unexpected token (3:32)

Had to switch from the auto imported thing to:

import {default as Select} from 'react-select'

For those using Babel, this could maybe also be resolved by adding a flow-preset to babel?

[ghost]

Got lots of compile errors after upgrade to v3. Is there a reason why you moved types in @types/react-select package to src instead of keeping it under lib?

I referenced some of your types outside index.d.ts in my code - it's not ideal, as not part of the public types API, but it is what it is. Example:

import {
  ValueType,
  ActionMeta,
  GroupedOptionsType,
  GroupType
} from "react-select/lib/types"

Problem with src is TypeScript lookup:
If I want GroupType or GroupedOptionsType from @types\react-select\src\types.d.ts, the sources from react-select\src\types.js are instead selected due to higher lookup priority in TypeScript. This file contains flow types, which break my webpack build that can only handle TypeScript and complains about unexpected token.

[pbadenski]

Is there any plan to fix this?

[IronSean]

Typescript would appear to be the higher priority to get right.

[wezleytsai]

Poorly (or not at all) documented, but the components are exported as such:

import { components } from 'react-select';

// somewhere else
<components.Option {...props} />
<components.Menu {...props} />

All the files under src are written in Flow and cannot be imported unless your build configuration supports Flow (which worth it to note, CRA does, so this issue is not reproducible in the sandbox).

[asfernandes]

I was using awesome-type-script loader without a problem and had this error when switching to ts-loader.

I had: import { Props } from 'react-select/src/Select'; while using "@types/react-select": "^3.0.5".

Updating to "@types/react-select": "^3.0.8" it exports Props in index.d.ts so I could change the import to import { Props } from 'react-select'; and had the problem gone.

So I think this bug is not from this project. It was in definitively type and it was fixed.

[boyskila]

I had the same problem specifically with Async and Creatable components and I found how to properly import them from the docs examples

Importing from 'react-select' solved the issue partially for me because types were missing

So instead of import Async from 'react-select/src/Async' or import Async from 'react-select' import from the dedicated folder import Async from 'react-select/async' and import Creatable from 'react-select/creatable'

I'm using @types/react-select: 3.0.13 and react-select: 3.1.0

[Methuselah96]

Looks like this is resolved. I'm going to close this for now in an effort to clean up the issues. Feel free to comment if you think this issue is still unresolved.