Site icon Hip-Hop Website Design and Development

Gutenberg: FontSizePicker crashes Editor "Cannot destructure property ‘frameElement’ of ‘r’ as it is null."

when I try to edit the fontsize in Gutenberg with the FontSizePicker Component the editor crashes with "Cannot destructure property ‘frameElement’ of ‘r’ as it is null." and reloads itself. I am pretty sure that this happens because I do something wrong here:

export default function Edit( { attributes, setAttributes } ) {

    const blockProps = useBlockProps();

    const fontSizes = [
        {
            name: __( 'Big' ),
            slug: 'big',
            size: 45,
        },
        {
            name: __( 'Bigger' ),
            slug: 'bigger',
            size: 60,
        }
        
    ];
    const fallbackFontSize = 16;
    
    const MyFontSizePicker = () => {
        const [ fontSize, setFontSize ] = useState( 12 );
        return (
            <FontSizePicker
                fontSizes={ fontSizes }
                value={ attributes.fontsize }
                fallbackFontSize={ fallbackFontSize }
                onChange={ ( newFontSize ) => {
                    setAttributes( { fontsize: newFontSize } );
                } }
            />
        );
    };

    return (
        <div { ...blockProps  } >
        <InspectorControls>
        <Panel>
            <PanelBody>
                <PanelRow>
                    <MyFontSizePicker />
                </PanelRow>
            <PanelRow>
            </PanelBody>
        </Panel>
        </InspectorControls>
        
    <ServerSideRender 
        block="game-review/random-game" 
        attributes={ attributes }
    />
    </div>
    );
}

Any idea why this happens? Other blocks from my other plugins run fine. Here is the full source code for context: https://github.com/mtoensing/game-review-block/tree/main/blocks/random-game Maybe this is the wrong why to use typography for server-side-blocks?