Superior Customized Fields – Concern with Slick Slider in ACF v6 Block

I am having a problem with Slick Slider within the admin preview with ACF 6 utilizing the brand new block.json option to arrange blocks.

I adopted an ACF tutorial by Elliot right here: https://www.advancedcustomfields.com/weblog/building-a-custom-slider-block-in-30-minutes-with-acf/

In ACF v5 utilizing the outdated technique so as to add blocks this labored fantastic, however after updating to ACF 6 and utilizing block.json the block crashes and says ‘This block has encountered an error and can’t be previewed.’ if I attempt to edit it. If I examine and look within the console I get this:

react-dom.min.js?ver=17.0.1:9 TypeError: Can not learn properties of null (studying 'add')
at e.initADA (slick.min.js?ver=6.1.1:1:19335)
at e.init (slick.min.js?ver=6.1.1:1:19101)
at new <nameless> (slick.min.js?ver=6.1.1:1:2832)
at i.fn.slick (slick.min.js?ver=6.1.1:1:42781)
at initializeBlock (home-slider.js?ver=6.1.1:19:39)
at o (acf.min.js?ver=6.0.5:1:1417)
at Object.doAction (acf.min.js?ver=6.0.5:1:587)
at n.doAction (acf.min.js?ver=6.0.5:1:18745)
at G.renderBlockPreviewEvent (acf-pro-blocks.min.js?ver=6.0.5:1:31066)
at G.componentDidAppend (acf-pro-blocks.min.js?ver=6.0.5:1:30504)

I am utilizing very comparable code to the instance within the tutorial to inisialise the slider, and it labored fantastic earlier than I up to date from ACF 5 to six. The code seems like this:

(operate($){

var initializeBlock = operate( $block ) {
    // $block.discover('img').doSomething();

    $block.discover('.home_banner_content').slick({
        fade: true,
        infinite: true,
        dots: false,
        prevArrow: $('.nav_prev'),
        nextArrow: $('.nav_next'),
        autoplay: true,
        autoplaySpeed: 8000,
        velocity: 1500,
        pauseOnHover: false,
        pauseOnFocus: false,
    });
}

// Initialize every block on web page load (entrance finish).
$(doc).prepared(operate(){
    $('.home_slider_block').every(operate(){
        initializeBlock( $(this) );
    });
});

// Initialize dynamic block preview (editor).
if( window.acf ) {
    window.acf.addAction( 'render_block_preview/sort=home-slider-block', initializeBlock );
} 
})(jQuery);

My ACF blocks are registered in my features.php like this:

operate register_acf_blocks() {

    // Scripts

    wp_register_script( 'slick', '//cdn.jsdelivr.internet/npm/slick-carousel@1.8.1/slick/slick.min.js', [ 'jquery', 'acf' ] );
    wp_register_script( 'home-slider-script', get_template_directory_uri() . '/template-parts/blocks/home-blocks/home-slider-block/home-slider.js', [ 'jquery', 'acf' ] );

    // Types

    wp_register_style( 'slick-css', '//cdn.jsdelivr.internet/npm/slick-carousel@1.8.1/slick/slick.css' );

    // Blocks

    register_block_type( __DIR__ . '/template-parts/blocks/home-blocks/home-slider-block' );
    register_block_type( __DIR__ . '/template-parts/blocks/page-blocks/intro-block' );
    register_block_type( __DIR__ . '/template-parts/blocks/page-blocks/cottage-slider-block' );

}
add_action( 'init', 'register_acf_blocks', 5 );

And my json file for the block seems like this:

{
    "title": "acf/home-slider-block",
    "title": "Homepage block: Dwelling banner slider",
    "description": "A block to show the principle homepage banner.",
    "model": "slick-css",
    "script": ["home-slider-script", "slick"],
    "class": "{custom}",
    "icon": "format-gallery",
    "apiVersion": 2,
    "key phrases": [],
    "acf": {
        "mode": "preview",
        "renderTemplate": "home-slider-block.php"
    },
    "align": "full",
    "types": [],
    "helps": {
        "align": true,
        "anchor": true,
        "alignContent": false,
        "colour": {
            "textual content": false,
            "background": true,
            "hyperlink": false
        },
        "alignText": false,
        "fullHeight": false
    },
    "attributes": {
    }
}