How to get React-select Async working in Wordpress 5 Block

[admin]

I'm trying to create a block for WordPress 5 using a

react-select

Async component, but when I add the component, I always get a:

Minified React Error #130 - which is "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."

I've defined react and react-dom as externals to use the WP built-ins. The Select component from

react-select

works, but the Async never does. I've tried all kinds of webpack configs with no success. As a test, I used the

create-guten-block

repo to <a href="https://github.com/ahmadawais/create-guten-block" rel="nofollow noreferrer">create a basic block</a> and then ejected it, added

react-select

via

npm install react-select

, and then added a simple example Async component and it's failing.

I don't really understand JSX, webpack and building very well, but I've been able to work through most other issues.

Is there some compatibility issue between react-select and WordPress, or I am doing something wrong?

import { AsyncSelect } from 'react-select/lib/Async';

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks

/**
 * Register: aa Gutenberg Block.
 *
 * Registers a new block provided a unique name and an object defining its
 * behavior. Once registered, the block is made editor as an option to any
 * editor interface where blocks are implemented.
 *
 * @link https://wordpress.org/gutenberg/handbook/block-api/
 * @param  {string}   name     Block name.
 * @param  {Object}   settings Block settings.
 * @return {?WPBlock}          The block, if it has been successfully
 *                             registered; otherwise undefined.
 */
registerBlockType( 'cgb/block-async-test', {
    // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
    title: __( 'async-test - CGB Block' ), // Block title.
    icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
    category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    keywords: [
        __( 'async-test — CGB Block' ),
        __( 'CGB Example' ),
        __( 'create-guten-block' ),
    ],

    /**
     * The edit function describes the structure of your block in the context of the editor.
     * This represents what the editor will render when the block is used.
     *
     * The "edit" property must be a valid function.
     *
     * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
     */
    edit: function( props ) {
        const getSessionOptions = (input) => {
      fetch("/wp-json/wp/v2/conf_sessions?per_page=50&search=${input}")
        .then((response) => {
          return response.json();
        }).then((json) => {
          const options = [];
          for (let sessionObj of json) {
            options.push({value: sessionObj.id, label: sessionObj.name });
          }
          return { options: options };
        });
    };

    const loadSessions = (inputValue) => {
      new Promise(resolve => {
      setTimeout(() => {
        resolve(getSessionOptions(inputValue));
      }, 1000);
    });
  }
        // Creates a <p class='wp-block-cgb-block-async-test'></p>.
        return (
            <div className={ props.className }>
                <p>— Hello from the backend.</p>
                <AsyncSelect
        onInputChange={null}
        loadOptions={loadSessions}
        cacheOptions
        defaultOptions
      />
                <p>
                    CGB BLOCK: <code>async-test</code> is a new Gutenberg block
                </p>
                <p>
                    It was created via{ ' ' }
                    <code>
                        <a href="https://github.com/ahmadawais/create-guten-block">
                            create-guten-block
                        </a>
                    </code>.
                </p>
            </div>
        );
    },

    /**
     * The save function defines the way in which the different attributes should be combined
     * into the final markup, which is then serialized by Gutenberg into post_content.
     *
     * The "save" property must be specified and must be a valid function.
     *
     * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
     */
    save: function( props ) {
        return (
            <div>
                <p>— Hello from the frontend.</p>
                <p>
                    CGB BLOCK: <code>async-test</code> is a new Gutenberg block.
                </p>
                <p>
                    It was created via{ ' ' }
                    <code>
                        <a href="https://github.com/ahmadawais/create-guten-block">
                            create-guten-block
                        </a>
                    </code>.
                </p>
            </div>
        );
    },
} );