Error with RichText Component

Question

WP Version 6.1.1

I'm not doing anything special as far as I can tell. When I add my custom block to a page, I type into it and on the second character, I get an Uncaught TypeError: Z is not a function with block-editor.min.js:26:522080 in my browser console.

From my edit.js:

import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
    return (
        <RichText
            { ...useBlockProps() }
            placeholder={ __( 'Your text', 'text-box' ) }
            tagName="h2"
        />
    );
}

1. Any insight into this specific issue?
2. Is there any way to set my site/block to use the non-minified version of block-editor.js so debugging things like this in the future may be easier?

Answer 1

You left out important required props:

value: String

Required. HTML string to make editable. The HTML should be valid, and valid inside the tagName, if provided.

onChange ( value: String ): Function

Required. Called when the value changes.

These props are not optional, the error you are encountering is likely because it's trying to call the onChange function but none was provided.

The official documentation in the block handbook on the core developer site has examples:

https://developer.wordpress.org/block-editor/reference-guides/richtext/#example

    edit( { attributes, setAttributes } ) {
        const blockProps = useBlockProps();

        return (
            <RichText
                { ...blockProps }
                tagName="h2" // The tag here is the element output and editable in the admin
                value={ attributes.content } // Any existing content, either from the database or an attribute default
                allowedFormats={ [ 'core/bold', 'core/italic' ] } // Allow the content to be made bold or italic, but do not allow other formatting options
                onChange={ ( content ) => setAttributes( { content } ) } // Store updated content as a block attribute
                placeholder={ __( 'Heading...' ) } // Display this text before any content has been added by the user
            />
        );
    },

    save( { attributes } ) {
        const blockProps = useBlockProps.save();

        return <RichText.Content { ...blockProps } tagName="h2" value={ attributes.content } />; // Saves <h2>Content added in the editor...</h2> to the database for frontend display
    }
} );

But importantly, it just does not make sense to not include those values. <RichText> is not like a standard HTML input that has an internal state and value, it has to be told what its value is, and when you make changes you need to update that value somewhere else using onChange. That's why the examples call setAttribute, it's not optional.