Gutenberg ServerSideRender is deprecated, how to work with new wp.serverSideRender component?

Question

While working with ServerSideRender wordpress gutenberg component, I am seeing the following notice.

wp.components.ServerSideRender is deprecated. Please use wp.serverSideRender instead.

Here is my test code:

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { Fragment } = wp.element;

const { InspectorControls } = wp.blockEditor;

const {
    PanelBody, SelectControl, ServerSideRender, TextControl, ToggleControl,
} = wp.components;

registerBlockType( 'test-me/test-to-block', {
    title: __( 'Test Me' ),
    icon: 'shield',
    category: 'common',
    keywords: [
        __( 'Test Me' ),
        __( 'Test' ),
        __( 'msbd' ),
    ],

    attributes: {
        adAlignment: {
            type: 'string',
            default: 'center-align',
        },
        isWrapper: {
            type: 'boolean',
            default: true,
        },
    },

    edit: ( props ) => {
        const { setAttributes, attributes } = props;
        const { adAlignment, isWrapper } = attributes;

        return (
            <Fragment>
                <div className={ `test-me ${ className }` }>
                    <ServerSideRender
                        block="test-me/test-to-block"
                        attributes={ attributes }
                    />
                </div>
            </Fragment>
        );
    },

    save: ( props ) => {
        const { attributes, className = '' } = props;

        return (
            <div className={ `test-me ${ className }` }>
                <ServerSideRender
                    block="test-me/test-to-block"
                    attributes={ attributes }
                />
            </div>
        );
    },
} );

How to modify this script to work with new wp.serverSideRender component?

Answer 1

The component is still functional, the issue is due to how it was pulled out into its own package. It is no longer uppercase and in order to use it in JSX, you will need to alias it:

const { serverSideRender: ServerSideRender } = wp;

See this issue for more details.

Answer 2

This just means they moved the component. Replace this part:

const {
    PanelBody, SelectControl, ServerSideRender, TextControl, ToggleControl,
} = wp.components;

with

const { serverSideRender } = wp;
const {
    PanelBody, SelectControl, TextControl, ToggleControl,
} = wp.components;

Unless they've changed anything else about the component, the location you're importing it from should be the only update needed.

Be careful with the first letter of 'serverSideRender', lower case!!