Problems with Slick slider in ACF v6

• Laurence1898

• December 1, 2022 at 3:00 pm

I’m having an issue with Slick Slider in the admin preview with ACF 6 using the new block.json way to set up blocks.

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

In ACF v5 using the old method to add blocks this worked fine, but after updating to ACF 6 and using block.json the block crashes and says ‘This block has encountered an error and cannot be previewed.’ if I try to edit it. In the console I see this:

react-dom.min.js?ver=17.0.1:9 TypeError: Cannot read properties of null (reading '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 <anonymous> (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’m using very similar code to the example in our tutorial to inisialise the slider, and it worked fine before I updated from ACF 5 to 6. My code looks like this:

(function($){

    /**
     * initializeBlock
     *
     * Adds custom JavaScript to the block HTML.
     *
     * @date    15/4/19
     * @since   1.0.0
     *
     * @param   object $block The block jQuery element.
     * @param   object attributes The block attributes (only available when editing).
     * @return  void
     */
    var initializeBlock = function( $block ) {
        // $block.find('img').doSomething();

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

    // Initialize each block on page load (front end).
    $(document).ready(function(){
        $('.home_slider_block').each(function(){
            initializeBlock( $(this) );
        });
    });

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

})(jQuery);

Any help would be greatly appreciated.