question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select.Async error with 1.0.0-rc.10

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:5
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
nathanvogelcommented, Sep 20, 2017

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.

1reaction
AndreasPresthammercommented, Sep 24, 2017

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Reactjs TypeError: Unable to get property 'string' of undefined ...
I am using react-select-class for Async options in my react project. i am getting error as "Unable to get property 'string' of undefined...
Read more >
react-select/README.md - UNPKG
I've nearly completed a major rewrite of this component (see issue [#568](https://github.com/JedWatson/react-select/issues/568) for details and progress). The ...
Read more >
react-select-async-test - CodeSandbox
Activating extension 'vscode.typescript-language-features' failed: Could not find bundled tsserver.js.
Read more >
Async/Await - Best Practices in Asynchronous Programming
Async void methods have different error-handling semantics. When an exception is thrown out of an async Task or async Task<T> method, that exception...
Read more >
Changelog ⚡️ FormKit — Vue Forms, Supercharged
Fixed a bug where a checkbox validation with "required" worked only the first time #169. 1.0.0-beta.10. July 29, 2022. New features. Input ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found