react-select: Component crashes

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:

bildschirmfoto 2016-01-28 um 15 43 13

Do you have an idea what I am doing wrong?

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 2
Comments: 27 (3 by maintainers)

Most upvoted comments

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

+31

elreeda on Oct 16, 2017

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.

skbailey on May 5, 2016

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

koebeen on May 15, 2016

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

guerinj on Dec 7, 2017

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');

gavingregory on Jun 16, 2017

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.

andreassh on Jun 26, 2017

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.

PhilKearney on Feb 21, 2017

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.

anton6 on May 10, 2016