React-select: Component crashes

[robertkowalski]

Hi and thanks for react-select!

I want to use react-select in apache/couchdb-fauxton

The component renders if I disable it:

          <Select
            ref="stateSelect"
            disabled={true}
            options={options} />

However when I enable it, it crashes with:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Select`.

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `Select`.

I already tried a lot of things to fix it, but I am quite puzzled now. Here is the full code which crashes:

  var STATES = [
    { value: 'australian-capital-territory', label: 'Australian Capital Territory', className: 'State-ACT' },
    { value: 'new-south-wales', label: 'New South Wales', className: 'State-NSW' },
    { value: 'victoria', label: 'Victoria', className: 'State-Vic' },
    { value: 'queensland', label: 'Queensland', className: 'State-Qld' },
    { value: 'western-australia', label: 'Western Australia', className: 'State-WA' },
    { value: 'south-australia', label: 'South Australia', className: 'State-SA' },
    { value: 'tasmania', label: 'Tasmania', className: 'State-Tas' },
    { value: 'northern-territory', label: 'Northern Territory', className: 'State-NT' },
  ];

  var JumpToDatabaseWidget = React.createClass({

    render: function () {
      var options = STATES;
      return (
        <div>
          <Select
            ref="stateSelect"
            disabled={false}
            options={options} />
        </div>
      );
    }
  });

Here is a screenshot with the stacktraces:

Do you have an idea what I am doing wrong?

[bruderstein]

react-select is now controlled, so pass value and an onChange handler.

[bruderstein]

Weird error though... if that's it, we should improve that :)

[robertkowalski]

hm didn't help:

          <Select
            onChange={function () {}}
            value="blerg"
            ref="stateSelect"
            disabled={false}
            options={options} />

[robertkowalski]

branch is at https://github.com/robertkowalski/couchdb-fauxton/tree/react-select

[bruderstein]

I smell a require.js / react-select interop issue... I'll take clone it and take a look - probably not till early next week though :(

[robertkowalski]

my awesome coworker @garrensmith found out that the 'react-input-autosize is not loaded properly with AMD - we'll keep you updated!

[ButuzGOL]

I put

<script src="https://localhost:8000/js/react-input-autosize.js"></script> 

and it helps

[mharrisweb]

I have the same issue

<Select.Async name="form-field-name" value="one" loadOptions={getOptions} />

Gives me:

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

[robertkowalski]

we switched to webpack and it solved our issue

[JedWatson]

Thanks for the update @robertkowalski - I'll see what I can do to test this for the next build and update the instructions for AMD usage... we could probably detect that react-input-autosize is not loading correctly and warn on that, which would at least make this problem an easier one to debug.

[skbailey]

I'm also getting the same error as @mharrisweb

It seems that instead of using <Select.Async loadOptions={} /> the approach that works is <Select asyncOptions={} /> but that doesn't seem to be in the documented options here although there are references to it.

[sebbsan]

+1 @skbailey I had exactly the same problem, using asyncOptions fixed it.
I use version ^0.9.1 - maybe something changed?

[anton6]

Not sure if this is going to help anyone, but I was using import { Select } from 'react-select' instead of var Select = require('react-select'). Once I changed it to var Select = require('react-select'), it worked.

[jochenberger]

Seems to be related to #270

[koebeen]

@anton6 Alternatively use:import Select from 'react-select'. (it's the default export, so no braces required)

[dalpo]

Thanks @skbailey!
Using asyncOptions fixed this strange behaviour.

[Cein-Markey]

I'm getting Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. in version 1.0.0-rc.1

import Select from 'react-select';

<Select.Async {...this.props}
        ref='selectField'
        value={this.getSavedValue()}
        loadOptions={this.getItems.bind(this)}/>

I don't want to use asynOptions as this would mean down grading. Has there been a fix put in place for this?

[PhilKearney]

Hey guys,

I am currently going threw an upgrade of a few modules.

I am getting the same error as above

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in. Check the render method of `DestinationInputField`.

I import it like this ->

import Select from 'react-select';

My component looks like this ->

<div id="destination-input">
                <FormFieldWrapper label="Destination"
                                  help={errorMessage}>
                <Select
                        id="destination-input"
                         name="destination"
                        onChange={this.destinationSelected.bind(this)}
                        options={destinationOptions}
                        multi={true}
                        value={selectedDestinationId}
                        placeholder="All Destinations"
                    />
                </FormFieldWrapper>
            </div>

I am on version 1.0.0-rc.3 with the latest version of react 15.4.2 and react-dom 15.4.2

Any help would be great.

[David-OConnor]

Same issue as those above: type is invalid -- expected a string(for built-in components)...

All that's required to throw the error is

import Select from react-select

<Select />

[aramosipyan]

Having the same issue.
webpack/es2015

[gavingregory]

Same issue (on versions: 1.0.0-rc.4 and 1.0.0-rc.5) encountered whilst migrating code from using webpack/babel-loader to webpack/awesome-typescript-loader. fixed by changing import statement from:

import Select from 'react-select';

to:

import Select = require('react-select');

[andreassh]

Had same error on 1.0.0.rc.2 when using the Creatable wrapper

import {Creatable} from 'react-select';

Upgraded to 1.0.0.rc.5 and now it's working.

[elreeda]

if anyone having the same problem with es5 you need to require default
var Select = require('react-select').default;
this solved my issue

also if u wanna get rid of the .default you may wanna check babel-plugin-add-module-exports

[i5on9i]

@Reda-bx
Thanx Reda-bx

In my case, with rc.10 and Typescript,

I have changed the import statement from

• import * from Select from 'react-select';

to

• import Select from 'react-select';

[Khomyachok5]

Thanks @koebeen
Adjusting the way react-select is added into the module worked for me:
// var Select = require('react-select'); - throws error
// import { Select } from 'react-select' - throws error
import Select from 'react-select' // - works!

[guerinj]

Hi,

I encountered the same error today, until last week (2017-12-01) everything worked fine but today reinstalling the lib broke my component.

The code that used to work :
import Select from 'react-select';

The code that now work :

const SelectPackage = require('react-select');
const Select = SelectPackage.default;

For some unknown reason Babel was unhappy with the syntax : Select = require('react-select').default

Hope this helps someone

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.