React-select: Cannot import react-select/creatable

[brunomonteirosud]

Hello!

I am trying to use React Select Creatable by following the last example in this page (Multi-select text input):
https://react-select.com/creatable

However, when I try to import this:

import CreatableSelect from "react-select/creatable";

I have the error:

Cannot find module react-select/creatable

I tried to create a custom.d.ts file with declare module "react-select/creatable";, and that fixed the error message but it creates other issues in the project.

I am using @types/react-select: ^2.0.19 and react-select: 2.4.3.

Here is a reproducible example, forked from the "React Select Creatable" example page mentioned above:
https://codesandbox.io/s/react-codesandboxer-example-wdrsk

Note: I am using react-select in other parts of the project and that works fine, the issue only happens when I try to specifically import react-select/creatable;

[brunomonteirosud]

As an updated, I found that import CreatableSelect from "react-select"; (without specifying the creatable path) is working.

If that's how it's supposed to be now, maybe we could update the documentation in the example page. Let me know if I should open a PR for that 😄

[devilcius]

@brunomonteirosud, I think your are not importing the Creatable submodule with import CreatableSelect from "react-select", but the main ReactSelect component. I solved it with:

javascript import { Creatable } from 'react-select';
I'm using "react-select": "^2.4.4"

[brunomonteirosud]

Sorry @devilcius, I think I am little confused. Are you saying I should import like this

import { Creatable } from 'react-select';

and then use a <Creatable> component, instead of a <CreatableSelect>?

I tried that and it looks like it works, but not sure what would be the difference between those 2 components...

I am just trying to reproduce the last example (Multi-select text input) from this page:

https://react-select.com/creatable

[vferdiansyah]

@brunomonteirosud For v2 users, if you want to use Creatable, you can import it like this

import { Creatable } from 'react-select'

or like this

import Creatable from 'react-select/lib/Creatable'

and use it like <Creatable>

You can read it in the v2 to v3 upgrade guide here.

[devilcius]

@brunomonteirosud, the difference between the two compenents is that with Creatable users can create new options along with choosing existing options. When you do import CreatableSelect from "react-select"; your are actually importing the main component Select not Creatable. When you do import Something from 'package' you are actually importing the main component from that package, _Something_ can be any name, it doesn't matter.

[brunomonteirosud]

Thank you all!

[kavdev]

If it helps, I got this to work with v3 via:
import Creatable from "react-select/creatable/dist/react-select.esm";