Can't get dynamic Gutenberg block to render on the frontend

Question

I tried everything I found online. The backend appears, including dynamic segments (withSelect, etc). But the simplest 'render-callback' doesn't appear on the frontend.

plugin.php

/**
 * Plugin Name: My Dynamic Block
 */

function my_plugin_render_dynamic_block( ) {
    return '<h1>Sample Block</h1>';
}

function register_dynamic_block() {
    wp_register_script(
        'dynamic-block',
        plugins_url( '/dist/block.js ', __FILE__),
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'dist/block.js' )
    );

    register_block_type(
        'my-plugin/dynamic-block',
        [
            'editor_script' => 'dynamic-block',
            'render_callback' => 'my_plugin_render_dynamic_block',
        ]
    );
}
add_action('init', 'register_dynamic_block');

block.js

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

registerBlockType( 'my-plugin/dynamic-block', {
    title: 'My Dynamic Block',
    icon: 'megaphone',
    category: 'widgets',

    edit({attributes}) {
        return (
            <div>Content</div>
        );
    },

    save() {
        return null;
    },
} );

Answer 1

Since you're making a dynamic block you don't need to register the block in JavaScript. Take a look at the Latest Posts block in Core to see how they do it.

Answer 2

Even if you do manage to render frontend with null return, On the next page reload you'll get block validation error. Because your html structure on edit function will not be matching up with save function. So

Instead of

    save() {
        return null;
    },

Try

     save() {
         return (
           <div>Content</div>
       );
    },

I hope this helps.