Monday, October 17, 2022
HomeWordPress Developmentblock editor - Factor kind is invalid: anticipated a string (for built-in...

block editor – Factor kind is invalid: anticipated a string (for built-in elements) or a category/perform (for composite elements) however acquired: undefined


I’ve used @wordpress/create-block to create a customized Gutenberg block.

Right here is edit.js:

/**
 * React hook that's used to mark the block wrapper aspect.
 * It offers all the mandatory props like the category identify.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
 import { useBlockProps, TextControl, NumberControl } from '@wordpress/block-editor';

 /**
  * The save perform defines the best way by which the totally different attributes ought to
  * be mixed into the ultimate 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 handed to the perform.
  * @param {Object} props.attributes Obtainable block attributes.
  * @return {WPElement} Factor to render.
  */
 export default perform save( { attributes } ) {
    const blockProps = useBlockProps.save();
    return (
        <div className="part 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"
                                worth={attributes.hero_heading}
                                onChange={(val) => {
                                    setAttributes({ hero_heading: val });
                                }}
                            />
                        </span>
                    </h1>
                    <p className="padding-20-20 mobile-centered">
                        <TextControl
                            label="Description"
                            worth={attributes.hero_description}
                            onChange={(val) => {
                                setAttributes({ hero_description: val });
                            }}
                        />
                    </p>
                    <p id='hero-buttons' className="padding-20-20 mobile-centered" model={{marginBottom: 0}}>
                        <a href="https://sandbox.mandoemedia.com/signup?origin=mktg_portal" className="pp-button-1" position="button" goal="_self">
                            <TextControl
                                label="Button 1 CTA"
                                worth={attributes.button_1_cta}
                                onChange={(val) => {
                                    setAttributes({ button_1_cta: val });
                                }}
                            />
                        </a>
                        <a href="https://sandbox.mandoemedia.com/sandbox-wizard" className="pp-button-2" position="button" goal="_self" onclick=''>
                            <span className="pp-button-2-text">
                                <TextControl
                                    label="Button 2 CTA"
                                    worth={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="Variety of 5 Star Evaluations"
                                isShiftStepEnabled={false}
                                worth={attributes.number_of_5_star_reviews}
                                onChange={(val) => {
                                    setAttributes({ number_of_5_star_reviews: Quantity(val) });
                                }}
                            />
                            + 5-star opinions on Google</div>
                    </div>
                </div>
                <div className="col-55">
                    <div id="videoLaunch">
                        <img src="{hero_image}" alt="{hero_image_alt}" />
                            <div className="mm-video-popup-icon"><i className="fas fa-play"></i></div>
                    </div>
                    <div id="vidBoxContainer">
                        <button kind="button" id="vidClose" title="Shut">
                            <svg xmlns="http://www.w3.org/2000/svg" model="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="{hero_video}" controls="" controlsList="nodownload"></video>
                        </div>
                    </div>
                </div>
                <div className="clear"></div>
            </div>
        </div>
    );
 }

Right here is save.js:

/**
 * React hook that's used to mark the block wrapper aspect.
 * It offers all the mandatory props like the category identify.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
 import { useBlockProps } from '@wordpress/block-editor';

 /**
  * The save perform defines the best way by which the totally different attributes ought to
  * be mixed into the ultimate 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 handed to the perform.
  * @param {Object} props.attributes Obtainable block attributes.
  * @return {WPElement} Factor to render.
  */
 export default perform save( { attributes } ) {
    const blockProps = useBlockProps.save();
    return (
        <div className="part 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">
                            {attributes.hero_heading}
                        </span>
                    </h1>
                    <p className="padding-20-20 mobile-centered">
                        {attributes.hero_description}
                    </p>
                    <p id='hero-buttons' className="padding-20-20 mobile-centered" model={{marginBottom: 0}}>
                        <a href="https://sandbox.mandoemedia.com/signup?origin=mktg_portal" className="pp-button-1" position="button" goal="_self">
                            {attributes.button_1_cta}
                        </a> 
                        <a href="https://sandbox.mandoemedia.com/sandbox-wizard" className="pp-button-2" position="button" goal="_self" onclick=''>
                            <span className="pp-button-2-text">
                                {attributes.button_2_cta}
                            </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">{attributes.number_of_5_star_reviews}+ 5-star opinions on Google</div>
                    </div>
                </div>
                <div className="col-55">
                    <div id="videoLaunch">
                        <img src="{attributes.hero_image}" alt="{attributes.hero_alt}" className="hero-image"/>
                            <div className="mm-video-popup-icon"><i className="fas fa-play"></i></div>
                    </div>
                    <div id="vidBoxContainer">
                        <button kind="button" id="vidClose" title="Shut">
                            <svg xmlns="http://www.w3.org/2000/svg" model="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="{hero_video}" controls="" controlsList="nodownload"></video>
                        </div>
                    </div>
                </div>
                <div className="clear"></div>
            </div>
        </div>
    )
 }

I’ve run npm run construct with out errors, however after I add the block to a web page, I obtain the console error:

react_devtools_backend.js:4026 Error: Minified React error #130; go to https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the complete message or use the non-minified dev setting for full errors and extra useful warnings.

At that web page I see:

The total textual content of the error you simply encountered is:

Factor kind is invalid: anticipated a string (for built-in elements) or a category/perform (for composite elements) however acquired: undefined.rgs[]

Any suggestions for tips on how to resolve this error?

Assist appreciated.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments