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>
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.
Advertisement
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.