En Laravel 8 / livewire 2.5 / alpinejs 3.4.2, trato de agregar mampostería para la lista de imágenes, pero al iniciarlo por ID o por nombre de clase, recibí un error:

 Uncaught TypeError: document.getElementById(...).masonry is not a function at Proxy.onHostelsGalleyViewPageComponentInit

En el archivo blade:

 <div class="frontend_page_container" x-data="hostelsGalleyViewPageComponent()" x-init="[onHostelsGalleyViewPageComponentInit() ]" id="hostels_gallery_page_container"> <section class="relative py-10"> <div class="container mx-auto px-4"> @if(count($hostelsDataRows) > 0) <div class="main_gallery__blocks" id="main_gallery__blocks"> @foreach($hostelsDataRows as $nextHostel) @livewire('hostel.hostel-gallery-item', ['nextHostel' => $nextHostel, 'loop_index'=> $loop->index]) @endforeach </div> @endif </div> </section> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script> function hostelsGalleyViewPageComponent() { return { onHostelsGalleyViewPageComponentInit: function () { console.log('onHostelsGalleyViewPageComponentInit::') // var $grid = document.getElementsByClassName('main_gallery__blocks').masonry({ // THIS LINE RAISE the same error var $grid = document.getElementById('main_gallery__blocks').masonry({ itemSelector: '.main_gallery__block', columnWidth: '.main_gallery__block', percentPosition: true }) }, } } // function hostelsGalleyViewPageComponent() { </script> </div>

¿Cuál es la forma correcta?

¡Gracias!