元素类型无效:需要字符串(用于内置组件)或类/函数(用于组合组件)，但未定义：

Question

我正在使用@wordpress/create-block创建一个定制的Gutenberg块。

当在Gutenberg中添加块时，我会收到以下错误：

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

edit.js：

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
  import { TextControl, NumberControl, MediaPlaceholder } from '@wordpress/components';

 /**
  * The save function defines the way in which the different attributes should
  * be combined into the final markup, which is then serialized by the block
  * editor into `post_content`.
  *
  * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
  *
  * @param {Object} props            Properties passed to the function.
  * @param {Object} props.attributes Available block attributes.
  * @return {WPElement} Element to render.
  */
 export default function Edit( { attributes, setAttributes } ) {
    return (
        <div className="section section-hero">
            <div className="row">
                <div className="col-45">
                    <h1 className="fl-heading padding-20-20 mobile-centered" id="hero-title">
                        <span className="fl-heading-text">
                            <TextControl
                                label='Heading'
                                value={ attributes.hero_heading }
                                onChange={(val) => {
                                    setAttributes({ hero_heading: val });
                                }}
                            />
                        </span>
                    </h1>
                    <p className="padding-20-20 mobile-centered">
                        <TextControl
                            label='Description'
                            value={ attributes.hero_description }
                            onChange={(val) => {
                                setAttributes({ hero_description: val });
                            }}
                        />
                    </p>
                    <p id='hero-buttons' className='padding-20-20 mobile-centered' style={{marginBottom: 0}}>
                        <a href='https://sandbox.mandoemedia.com/signup?origin=mktg_portal' className='pp-button-1' role='button' target='_self'>
                            <TextControl
                                label='Button 1 CTA'
                                value={attributes.button_1_cta}
                                onChange={(val) => {
                                    setAttributes({ button_1_cta: val });
                                }}
                            />
                        </a>
                        <a href='https://sandbox.mandoemedia.com/sandbox-wizard' className='pp-button-2' role='button' target='_self' onclick=''>
                            <span className='pp-button-2-text'>
                                <TextControl
                                    label='Button 2 CTA'
                                    value={attributes.button_2_cta}
                                    onChange={(val) => {
                                        setAttributes({ button_2_cta: val });
                                    }}
                                />
                            </span>
                        </a>
                    </p>
                    <div className="pp-rating-content padding-20-20">
                        <div className="pp-rating mobile-centered">
                            <i className="pp-star-full">★</i><i className="pp-star-full">★</i><i className="pp-star-full">★</i><i className="pp-star-full">★</i><i className="pp-star-full">★</i>
                        </div>
                        <div className="pp-rating-title mobile-centered">
                            <NumberControl
                                label='Number of 5 Star Reviews'
                                isShiftStepEnabled={false}
                                value={ attributes.number_of_5_star_reviews }
                                onChange={(val) => {
                                    setAttributes({ number_of_5_star_reviews: Number(val) });
                                }}
                            />
                            + 5-star reviews on Google</div>
                    </div>
                </div>
                <div className="col-55">
                    <div id="videoLaunch">
                        if(attributes.hero_image_URL) {
                            (
                                <img
                                    src={ attributes.hero_image_URL }
                                    // onClick={ openEvent }
                                    id="mm-hero"
                                />
                            )
                        }
                        else {
                            (
                                <MediaPlaceholder
                                    onSelect = { media => { setAttributes({ hero_image_alt: media.alt, hero_image_URL: media.url }); } }
                                    allowedTypes = { [ 'image' ] }
                                    multiple = { false }
                                    labels = { { title: 'Upload' } }
                                >
                                </MediaPlaceholder>
                            )
                        }
                        <div className="mm-video-popup-icon"><i className="fas fa-play"></i></div>
                    </div>
                    <div id="vidBoxContainer">
                        <button type="button" id="vidClose" title="Close">
                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
                                <path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path>
                            </svg>
                        </button>
                        <div id="vidBox">
                            <video id="mm-video" url={attributes.hero_video} controls="" controlsList="nodownload"></video>
                        </div>
                    </div>
                </div>
                <div className="clear"></div>
            </div>
        </div>
    );
 }

block.json：

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "mandoe/mandoe-hero",
    "version": "0.1.0",
    "title": "Mandoe Hero Section",
    "category": "text",
    "icon": "flag",
    "description": "A hero section with dual CTA buttons and video",
    "attributes": {
        "hero_heading": {
            "type": "string"
        },
        "button_1_cta": {
            "type": "string"
        },
        "button_2_cta": {
            "type": "string"
        },
        "number_of_5_star_reviews": {
            "type": "number"
        },
        "hero_image_ID": {
            "type": "number",
            "default": 0,
            "selector": "#mm-hero"
        },
        "hero_image_URL": {
            "type": "string",
            "default": "https://mandoemedia.com/wp-content/uploads/2022/08/Mandoe-digital-signage.jpg",
            "selector": "#mm-hero"
        },
        "hero_image_alt": {
            "type": "string",
            "selector": "#mm-hero"
        },
        "hero_video": {
            "type": "string",
            "selector": "#mm-video"
        }
    },      
    "supports": {
        "html": false
    },
    "textdomain": "mandoe",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css"
}

你能看到这个错误来自哪里吗？

帮助感激。

Answer 1

我发现用

import { useBlockProps, MediaPlaceholder } from '@wordpress/block-editor';
import { TextControl, __experimentalNumberControl as NumberControl } from '@wordpress/components';

而不是

import { TextControl, NumberControl, MediaPlaceholder } from '@wordpress/components';

解决了这个问题。