React-select library crashing my page on render

I am currently attempting to implement react-select into a web-app I am developing, but whenever it is rendered it crashes the entire react application with minified error #130 – Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

The code which procedurally generates these select elements looks as such

let optionObjects = await retrievePropertyOptions(null, null, null, property, true)
                    let options = this.listOptionConstructor(optionObjects, true)
                    //options returns an array of objects with value and label properties
                    let selector =
                        <React.Fragment key={number}>
                            <label className="cssclasses"
                                for={`select-custom-${name}`}>
                                {name}</label>
                            <ReactSelect options={options} onChange={(selected) => {
                                this.setState({
                                    [`multi-selector${number}`]: selected
                                })}}
                                value = {this.state[`multi-selector${number}`]}
                             />
                        </React.Fragment>

JavaScript
​x
 
let optionObjects = await retrievePropertyOptions(null, null, null, property, true)
                    let options = this.listOptionConstructor(optionObjects, true)
                    //options returns an array of objects with value and label properties
                    let selector =
                        <React.Fragment key={number}>
                            <label className="cssclasses"
                                for={`select-custom-${name}`}>
                                {name}</label>
                            <ReactSelect options={options} onChange={(selected) => {
                                this.setState({
                                    [`multi-selector${number}`]: selected
                                })}}
                                value = {this.state[`multi-selector${number}`]}
                             />
                        </React.Fragment>
​

And my import is simply const ReactSelect = require('react-select')

Does anyone know why I am running into this error? It works perfectly with everything besides the react-select component so I am very confused what I may have done wrong. I tried the import as a de-structured object as well just in case and still ran into the same issue. When I console.log out selector, I get an object that looks identical to any other react fragment object, and I am bundling my files using webpack which I believe is correctly configured as it builds and works perfectly besides this one issue. Any suggestions are appreciated.

edit: Created a codepen to showcase the issue (https://codepen.io/AugustTGuenther/pen/abmJEpx), getting a different error here and slightly more description from the react error but still does not want to render even with static mock data as the options. I imagine if someone could point out what I am doing wrong there it would be the same issue in my actual code – matched react versions and react-select versions to the actual code as well.

Answer

My problem ended up being webpack/babel messing up default exports/imports, see jackypan1989’s answer on this question (not the “accepted” answer): Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

Had nothing to do with react-select in particular – they just happened to be the react component library I was using which got broken.

Advertisement

Answer