Gutenberg: <ServerSideRender> returning "____ is not a valid property of Object"

[jakeparis]

Description

I've created a block which is a wrapper around an existing shortcode with complex php logic. The public view works fine, but when the editor tries to render the <ServerSideRender> however, it returns attributes: "username is not a valid property of Object."

Sample

// php
register_block_type('directory-search-2018/person',[
    'render_callback' => function($atts,$content){
        $input = [];
        if( $atts['username'] )
            $input['id'] = $atts['username'];
        return directory_search_2018_single_person_display($input);
    }
]);

and

wp.blocks.registerBlockType( 'directory-search-2018/person', {
    title: 'Person Profile',
    ...

    attributes: {
        username: {
            type: 'string'
        }
    },

    edit ( props ) {
        const { attributes, isSelected, setAttributes } = props;
        if( ! isSelected ) {
            return(
                <ServerSideRender
                    block="directory-search-2018/person"
                    attributes={{
                        username: attributes.username
                    }}
                />
            );
        }

        return (
            <TextControl
                value={ attributes.username }
                label="username"
                onChange={ username => setAttributes({username}) }
            />
        );
    },
    save () {
        return null;
    }
    ...

});

[websevendev]

Looking at the source of a block using ServerSideRender, you need to define the attributes when registering the block:

https://github.com/WordPress/gutenberg/blob/7dbcadb4e381ac14f480064ca0549ec1221ec55b/packages/block-library/src/archives/index.php#L118-L141

[jakeparis]

Yes, that is the problem, thank you. That is not indicated on the docs page. I've added a patch to add that info to the docs.