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

admin

Administrator
Staff member
I'm trying to create a block for WordPress 5 using a
Code:
react-select
Async component, but when I add the component, I always get a:

Code:
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
Code:
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
Code:
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
Code:
react-select
via
Code:
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?

Code:
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) =&gt; {
      fetch("/wp-json/wp/v2/conf_sessions?per_page=50&amp;search=${input}")
        .then((response) =&gt; {
          return response.json();
        }).then((json) =&gt; {
          const options = [];
          for (let sessionObj of json) {
            options.push({value: sessionObj.id, label: sessionObj.name });
          }
          return { options: options };
        });
    };

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

    /**
     * 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 (
            &lt;div&gt;
                &lt;p&gt;— Hello from the frontend.&lt;/p&gt;
                &lt;p&gt;
                    CGB BLOCK: &lt;code&gt;async-test&lt;/code&gt; is a new Gutenberg block.
                &lt;/p&gt;
                &lt;p&gt;
                    It was created via{ ' ' }
                    &lt;code&gt;
                        &lt;a href="https://github.com/ahmadawais/create-guten-block"&gt;
                            create-guten-block
                        &lt;/a&gt;
                    &lt;/code&gt;.
                &lt;/p&gt;
            &lt;/div&gt;
        );
    },
} );