React-select: Error: Cannot find module "react-select/dist/react-select.css"

[alexeystrakh]

I'm using the following code from the Usage section to add a react-select component to my react js app component:

import Select from 'react-select';

Here is my code:

        let options = [
            { value: 'value1', label: 'value 1' },
            { value: 'value2', label: 'value 2' },
            { value: 'value3', label: 'value 3' },
        ];

        return (
            <div>
                <Select
                    name="item-selector"
                    value='value 1'
                    options={options} />
            </div>
        )

And unable to load it with the following console error:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of t.

I've also tried to include CSS as per guide:

// Be sure to include styles at some point, probably during your bootstrapping
import 'react-select/dist/react-select.css';

and failed with a not found error in console. Please advise.

[MrLeebo]

@alexeystrakh The first error looks more like a problem with your component (is that component t?), but I guess you could console.log(Select) to confirm if it is null/undefined.

Regarding the CSS, you could try

import 'node_modules/react-select/dist/react-select.css';

Or add one or more ../ to the front if your component is in a subfolder until you get to the parent folder where node_modules resides.

[ananthshenoy]

@alexeystrakh The warning that you are getting might be probably because of some wrong import statement.
There is no issue with CSS import that you are trying to do. So make sure that you have installed "react-select" properly and check your node_modules folder.

[sag1v]

getting the same error here

[asafam]

@alexeystrakh Try referencing the CSS via its relative path. For example:

import '../../../node_modules/react-select/dist/react-select.css';

[Alejandrokbo]

I have the same problem, when I go to the dir node_modules/react-select/dist/ there is missing the react-select.css archive. And the official page the source link has a rotund error 404.
What can I do? Besides make by myself the stylesheet?

[MrLeebo]

@Alejandrokbo Keep in mind that react-select v2 does not contain a CSS file nor do you need it. For v1 you should have no trouble importing as long as your application uses or mimics the react-scripts webpack config, with regard to handling CSS imports. CodeSandbox Example

If you are using v1 and the import doesn't work, you're probably using a custom webpack config that is either using an older version of webpack or doesn't include css-loader or style-loader or something. I don't think its terribly useful for people to be posting messages about their CSS imports not working unless they also describe their webpack configurations.

That said, I don't think GitHub issues are an appropriate place to get into details about people's webpack configs. I'll bet there are plenty of resources on stackoverflow.com about this.

[tonymckendry]

I'm seeing the same issue - my node modules directory does not contain a css file in a newer project with a fresh npm install of react-select - if I go to other projects that use this package, they all contain the css files in the node modules directory

Edit: nevermind, I noticed the new project has v2 and the old project is on v1 - meaning the code I borrowed from other project that references that import is not going to work. All good.

[kkammili]

I reverted back react-select to some older version and everything seems
fine.

Sent with Shift
https://tryshift.com/?utm_source=SentWithShift&utm_campaign=Sent%20with%20Shift%20Signature&utm_medium=Email%20Signature&utm_content=General%20Email%20Group

On Tue, Oct 23, 2018 at 1:42 PM Tony McKendry [e-mail]
wrote:

I'm seeing the same issue - my node modules directory does not contain a
css file in a newer project with a fresh npm install of react-select - if I
go to other projects that use this package, they all contain the css files
in the node modules directory

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/JedWatson/react-select/issues/1592#issuecomment-432370183,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AgHKNp7gk1zRYJHU5eT5rRvWkDe57G63ks5un2MigaJpZM4MWjii
.

[gangeshRoy]

i am trying to resolve
./src/components/MultiSelectDropDown.js
Module not found: Can't resolve 'react-select/dist/react-select.css' this issue
and i added in my component
import "react-select/dist/react-select.css";
what still geting same how to heandel please help me

[IanVS]

Hi, in V2 there is no longer a css file to override, but you should instead control styling through the styles prop. You can read here for more info: https://react-select.com/styles#styles

[gwyneplaine]

as above, closing this issue