Invariant Violation: Minified React error #130

[robbisy]

I've tested the code in the docs :

const {
    registerBlockType,
    RichText,
    BlockControls,
    AlignmentToolbar,
    source
} = wp.blocks;

registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-04', {
    title: 'Hello World (Step 4)',

    icon: 'universal-access-alt',

    category: 'layout',

    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
        alignment: {
            type: 'string',
        },
    },

    edit( { attributes, className, focus, setAttributes, setFocus } ) {
        const { content, alignment } = attributes;

        function onChangeContent( newContent ) {
            setAttributes( { content: newContent } );
        }

        function onChangeAlignment( newAlignment ) {
            setAttributes( { alignment: newAlignment } );
        }

        return [
            !! focus && (
                <BlockControls key="controls">
                    <AlignmentToolbar
                        value={ alignment }
                        onChange={ onChangeAlignment }
                    />
                </BlockControls>
            ),
            <RichText
                key="editable"
                tagName="p"
                className={ className }
                style={ { textAlign: alignment } }
                onChange={ onChangeContent }
                value={ content }
                focus={ focus }
                onFocus={ setFocus }
            />
        ];
    },

    save( { attributes, className } ) {
        const { content, alignment } = attributes;

        return <p className={ className } style={ { textAlign: alignment } }>{ content }</p>;
    },
} );

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

[JimSchofield]

I'm running into the same issue when I try to pull RichText or Plain Text from wp.blocks.

If I console log wp.blocks.RichText it is undefined, while console logging wp.blocks.Editable returns a value.

I don't believe RichText or PlainText are being imported into wp.blocks.

`
const { registerBlockType, Editable, RichText } = wp.blocks;
console.log(RichText); //undefined
console.log(Editable); //present

registerBlockType('guty/hero-block',
{
title: 'Hero Block',
icon: 'universal-access-alt',
category: 'common',

    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
    },

    edit({ attributes, className, focus, setAttributes, setFocus }) {
        const { content } = attributes;

        function onChangeContent(newContent) {
            setAttributes({ content: newContent });
        }

        return (
            <div>
            <Editable
                tagName="p"
                className={className}
                onChange={onChangeContent}
                value={content}
                focus={focus}
                onFocus={setFocus}
            />
            </div>
        );
    },

    save({ attributes, className }) {
        const { content } = attributes;

        return <p className={className}>{content}</p>;
    },
}

);
`

[youknowriad]

Are you using the master branch? the docs reflects the code in the master branch and RichText is not release yet, use Editable instead (until the next release)

[emfluenceindia]

I have having the same issue. Here is my snippet:

...
const { registerBlockType, RichText, source } = wp.blocks;
...
registerBlockType( 'cgb/block-external-link-demo', {
	// Block name.
	title: __( 'External Link' ),
	icon: 'admin-links',
	category: 'common',
	keywords: [
		__( 'External link' ),
		__( 'Add link' ),
		__( 'Create external link' ),
	],
	attributes: {
		link_text: {
			selector: 'a',
			source: 'children',
		},

		link_url: {
			selector: 'a',
			source: 'attribute',
			attribute: 'href',
		},
	},

	edit: function( props ) {

		// get link_text and link_url

		let link_text = props.attributes.link_text
		let link_url = props.attributes.link_url

        // define functions
        function onChangeContentUrl( content ) {
            props.setAttributes( { link_url: content } )
        }

        function onChangeContentName( content ) {
            props.setAttributes( { link_text: content } )
        }

		return(
			<div id="block-editable-box">
				<p>Link Block</p>
				<label>Name:</label>
				<RichText className={props.className}
					onChange={onChangeContentName}
					value={link_text}
					placeholder="Title of the link"
				/>

				<label>URL:</label>
				<RichText
					format="string"
					className={props.className}
					onChange={onChangeContentUrl}
					value={link_url}
					placeholder="Url of the link"
				/>
			</div>
		)
	},

	save: function( props ) {
		return(
			<a href={ props.attributes.link_url }>{ props.attributes.link_text }</a>
		)
	},
} );

Error message:

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

When I remove <RichText /> parts the errors goes away and the block renders only with the <label></label> parts.

My Gutenberg version is 3.6.2.

[JimSchofield]

In my case above I was on the wrong branch. In your case I think you're trying to peel off RichText from wp.blocks. That's the old way to get editor components. Try this:

const { RichText } = wp.editor

[emfluenceindia]

@JimSchofield yes, that was the mistake. wp.editor fixed the issue. But there is another problem now. Looks like the watcher is not compiling the code! I cannot see updated block :( It is always showing an old version of it although it is saying Compiled Successfully!

[emfluenceindia]

Please disregard my previous message. It has got resolved!