如何让React-select Async在Wordpress 5 Block中工作

Question

我正在尝试使用react-select异步组件为WordPress 5创建一个块，但是当我添加该组件时，总是得到：

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

我已经将react和react-dom定义为外部组件，以使用WP内置组件。 react-select中的Select组件有效，但Async则永远不会起作用。我尝试了各种webpack配置，但均未成功。作为测试，我使用了create-guten-block回购到create a basic block的仓库，然后将其弹出，通过react-select添加了npm install react-select，然后添加了一个简单的示例异步组件，但是它失败了。

我不太了解JSX，webpack和构建，但是我能够解决大多数其他问题。

react-select和WordPress之间是否存在兼容性问题，或者我做错了什么？

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>
        );
    },
} );