Untitled

when click my custom block i get this error This block has encountered an error and cannot be previewed. 
but onload the preview of related posts shoes up

index.js

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, NumberControl } from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';

registerBlockType('custom/related-articles', {
    title: __('Related Posts', 'text-domain'),
    icon: 'universal-access-alt',
    category: 'common',
    attributes: {
        postsPerPage: {
            type: 'number',
            default: 5,
        },
    },
    edit({ attributes, setAttributes }) {
        const blockProps = useBlockProps();

        return (
            <>
                <InspectorControls>
                    <PanelBody title={__('Block Settings', 'text-domain')} initialOpen={true}>
                        <NumberControl
                            label={__('Posts Per Page', 'text-domain')}
                            value={attributes.postsPerPage}
                            onChange={(value) => setAttributes({ postsPerPage: parseInt(value, 10) })}
                            min={1}
                            max={20}
                        />
                    </PanelBody>
                </InspectorControls>
                <div {...blockProps}>
                    <ServerSideRender
                        block="custom/related-articles"
                        attributes={attributes}
                    />
                    <p>{__('This is a preview of related articles.', 'text-domain')}</p>
                </div>
            </>
        );
    },
    save() {
        // Returning null because the block is server-side rendered
        return null;
    },
});



functions.php code

function render_related_articles_block($attributes) {
    global $post;

    // Set the default number of posts to display if not provided
    $posts_per_page = isset($attributes['postsPerPage']) ? $attributes['postsPerPage'] : 5;

    // Get the categories of the current post
    $categories = wp_get_post_categories($post->ID);

    // Query for related posts
    $related_posts = new WP_Query(array(
        'category__in'   => $categories,
        'posts_per_page' => $posts_per_page,
        'post__not_in'   => array($post->ID),
        'orderby'        => 'date',
        'order'          => 'DESC',
    ));

    // Start output buffering
    ob_start();

    // Check if there are related posts and display them
    if ($related_posts->have_posts()) {
        echo '<h3 class="wp-block-heading">Related Recipes</h3>';
        echo '<ul class="related-posts two-columns">';
        while ($related_posts->have_posts()) {
            $related_posts->the_post();
            ?>
            <li class="related-post-item">
                <div class="related-post-thumbnail">
                    <a href="<?php the_permalink(); ?>">
                        <?php if (has_post_thumbnail()) {
                            the_post_thumbnail('thumbnail', array('decoding' => 'async', 'width' => '1', 'height' => '1'));
                        } ?>
                    </a>
                </div>
                <div class="related-post-title">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </div>
            </li>
            <?php
        }
        echo '</ul>';
    } else {
        echo '<p>' . __('No related articles found.', 'text-domain') . '</p>';
    }

    // Reset the post data
    wp_reset_postdata();

    // Return the buffered content
    return ob_get_clean();
}

function custom_related_articles_block_init() {
    register_block_type('custom/related-articles', array(
        'render_callback' => 'render_related_articles_block',
        'attributes' => array(
            'postsPerPage' => array(
                'type' => 'number',
                'default' => 5,
            ),
        ),
    ));
}
add_action('init', 'custom_related_articles_block_init');




function my_custom_block_enqueue_assets() {
    wp_enqueue_script(
        'my-custom-block',
        get_template_directory_uri() . '/wp-related-custom-block/build/index.js',
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(get_template_directory() . '/wp-related-custom-block/build/index.js')
    );

}
add_action('enqueue_block_editor_assets', 'my_custom_block_enqueue_assets');