Our app is React + Redux + Redux Form with heavy use of react-select, particularly the Async version.
After updating from rc.9 to rc.10, we're getting an error in existing code. Here's a sample (sorry, Plunkr is blocked for me at work):
const getTenantList = (searchString) => {
return new Promise((resolve, reject) => {
resolve({
options: [
{ value: 'bob', label: 'BOB' },
{ value: 'john', label: 'JOHN' }
]
});
});
};
...
<Select.Async
name="tenant"
value={{ value: '', label: '' }}
loadOptions={getTenantList}
/>
If I remove the Async, it works as expected (empty dropdown), but if I put it back, I get the following warning and error:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of
ServiceDefinitionsForm.
in ServiceDefinitionsForm (created by Form(ServiceDefinitionsForm))
in Form(ServiceDefinitionsForm) (created by Connect(Form(ServiceDefinitionsForm)))
in Connect(Form(ServiceDefinitionsForm)) (created by ReduxForm)
in ReduxForm (created by Connect(ReduxForm))
in Connect(ReduxForm) (created by ServiceDefinitions)
in div (created by ModalBase)
in div (created by Modal)Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of
ServiceDefinitionsForm.
As stated, this works fine in rc.9. Any guidance would be much appreciated.
Same issue here when updating to rc.10, using this
<Select
name="domain-select"
value={this.props.selectedDomainKey}
options={this.props.domains}
onChange={this.props.onDomainSelected}
noResultsText="Aucun r茅sultat"
placeholder="Domaine..."
/>
where props.domains is an array of objects loaded asynchronously with Redux.
I get the same error as garretmurphy with object instead of undefined.
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
I am getting this same error with RC10 and typescript
const options: ReactSelect.Options = [{ value: '0', label: '25mw' }, { value: '1', label: '200mw' }, { value: '2', label: '500mw' }];
<ReactSelect name="form-field-name" value="0" options={options} />
In rc6 it suddenly changed its module export. The ReactSelect component is now exposed under 'default' export. This doesnt match the typescript typings in @types/react-select. Not sure if this an intended change though.
Getting Same Error
I'm getting a similar error, perhaps the same as @nathanvogel.
The ReactSelect.Asyncversion actually works fine, but for the non-async, non-creatable one i'm getting:
react.development.js:171 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
Following koebeen's recommendation on #741, I changed
var Select = require("react-select");
to
import Select from "react-select";
and now it works :)
I'm going to close this, v1 is stable now and I although there are some edge cases, I'm not sure how to better support all the ways it can be imported and bundled.
Thanks everyone for the investigation and suggestions - hopefully this will help anyone else debugging similar issues.
Most helpful comment
Same issue here when updating to rc.10, using this
where
props.domainsis an array of objects loaded asynchronously with Redux.I get the same error as garretmurphy with
objectinstead ofundefined.Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.