Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

Hi,

i get the following error when i try to use react-select/async.

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

I just import the async like this

import AsyncSelect from 'react-select/async';

and then i use it as follows: `const Test = () => { const [displaySelect, setDisplaySelect] = useState(false);

useEffect(() => {
    setDisplaySelect(true);
}, [])

return (
    <div>
        { displaySelect &&  <AsyncSelect options={[{value: 'ts', label:'test'}]} /> }
    </div>
)

}

export default Test;`

I added the setDisplaySelect because we use server side rendering and another error regarding emotion was being displayed. Do you have any ideas what goes wrong?

[kyrstenkelly]

@ebonow Thank you for the response, I appreciate your help! I did two things yesterday:

1. Filtered out any undefined props so we’re not passing a bunch of unnecessary things (although this didn’t solve the problem)
2. Modified our build script (this fixed the issue)

Our component library is mostly used to provide consistent styles, so we rarely use 3rd party libs, which I think is why this issue hasn’t arisen before. I modified our Rollup config to export a umd bundle instead of cjs (along with messing with some other settings), and that actually resolved the issue!

For whatever reason, the way we were bundling things wasn’t properly resolving default exports from node_modules, I believe. We use one other third party lib and it’s always worked fine, but we do not use the default export in that case.

[alexristich]

Could it be related to an incorrect import somewhere else in that file? Perhaps this helps: https://stackoverflow.com/a/42814137

The code snippet you included seems to be okay.

Regarding the async select, instead of using options, I believe you should be using defaultOptions instead. See example and source code here: https://react-select.com/async#defaultoptions