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:

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";

[Lambdaphile]

@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:

import { Creatable } from 'react-select';

I'm using "react-select": "^2.4.4"

Huh... VSCode is not showing Creatable as something importable when trying to import like that but it works... Didn't know that VSCode can jebait with imports :D

[espitiachisol]

@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:

import { Creatable } from 'react-select';

I'm using "react-select": "^2.4.4"

thanks~~~ this works for me

[O-Q]

I solved this by changing the "moduleResolution" in tsconfig to "Node" instead of "NodeNext".

but I prefer to stick to importing from "react-select/creatable/dist/react-select-creatable.cjs" because of using "exports" field in my mono repo package which doesn't seem to work in moduleResolution "Node".