React-select component not working

Question

I'm trying to use the async version of the react-select component. I have the normal version working absolutely fine, but when I add try to use this async example from the project documentation:

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

var getOptions = function(input, callback) {
    setTimeout(function() {
        callback(null, {
            options: [
                { value: 'one', label: 'One' },
                { value: 'two', label: 'Two' }
            ],
            // CAREFUL! Only set this to true when there are no more options,
            // or more specific queries will not be sent to the server.
            complete: true
        });
    }, 500);
};

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

I'm getting this error in the console:

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 OrderHeaderEdit.

I've been trying to debug that through into the React code but I can't for the life of me work out what's happening.

This is my complete component code for the component that has the async select component above on. This control is running in a Meteor 1.3 app:

import React from 'react';
import Select from 'react-select';

const OrderHeaderEdit = React.createClass({

    getOptions(input, callback) {
        setTimeout(function () {
            callback(null, {
                options: [
                    { value: 'one', label: 'One' },
                    { value: 'two', label: 'Two' }
                ],
                // CAREFUL! Only set this to true when there are no more options,
                // or more specific queries will not be sent to the server.
                complete: true
            });
        }, 500);
    },

    render() {
        console.log("OrderHeaderEdit props: ", this.props);

        var getOptions = function (input, callback) {
            setTimeout(function () {
                callback(null, {
                    options: [
                        { value: 'one', label: 'One' },
                        { value: 'two', label: 'Two' }
                    ],
                    // CAREFUL! Only set this to true when there are no more options,
                    // or more specific queries will not be sent to the server.
                    complete: true
                });
            }, 500);
        };

        return (
            <div>

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

            </div>
        );
    }
});

export default OrderHeaderEdit;

It seems like the issue might be the '.Async' extension in the Select.Async line, could that be confusing Meteor?

Answer 1

I worked out what the issue was: Installing from npm currently installs version 0.9.x, but the documentation and examples have already been updated to version 1.0.0-betaX which has breaking changes.

So, the Select.Async was indeed the issue, that syntax only exists from 1.0 onwards as discussed in this list of breaking changes in 1.0.0 from the react-select github repository. Updating my code to use the 1.0.0-beta9 version fixed the issue.