Preline Advanced Select Error "Uncaught TypeError: window.$hsSelectCollection is undefined"

Question

I am using Preline UI which is used in my application using the Laravel framework, I have imported HSSelect & preline in the app.js file and when I call an event in the Preline Select documentation to retrieve the value which will later be entered into the Livewire property. and documentation at the following link: Documentation Preline Advance Select

And I get the following error on the console: Uncaught TypeError: window.$hsSelectCollection is undefined

even though when I look at the console to display the window, there is $hsSelectCollection in it

I've used addEventListeners "DOMContentLoaded", "Onload", and "Livewire:initialized" and it still doesn't work.

My Code :

App.js

import { HSSelect } from 'preline';

const ss = HSSelect.getInstance('#major_id');
ss.on('change', (val) => {
    console.log(val)
});

Livewire Blade Component

                    <select id="major_id" name="major_id" wire:model="major_id" data-hs-select='{
                        "hasSearch": true,
                        "searchPlaceholder": "Search...",
                        "searchClasses": "block w-full text-sm border-gray-300 rounded-lg focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-[1] dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 py-2 px-3",
                        "searchWrapperClasses": "bg-white p-2 -mx-1 sticky top-0 dark:bg-slate-900",
                        "placeholder": "Jurusan",
                        "toggleTag": "<button type=\"button\"><span class=\"me-2\" data-icon></span><span class=\"text-gray-900 dark:text-gray-300\" data-title></span></button>",
                        "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 px-4 pe-9 ps-12 flex text-nowrap w-full cursor-pointer bg-white border border-gray-300 rounded-full text-start text-sm focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-[1] dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600",
                        "dropdownClasses": "mt-2 max-h-[300px] pb-1 px-1 space-y-0.5 z-20 w-full bg-white border border-gray-300 rounded-lg overflow-hidden overflow-y-auto dark:bg-slate-900 dark:border-gray-700",
                        "optionClasses": "hs-selected: py-2 px-4 w-full text-sm text-gray-900 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-none focus:bg-gray-100 dark:bg-slate-900 dark:hover:bg-slate-800 dark:text-gray-300 dark:focus:bg-slate-800",
                        "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"text-gray-800 dark:text-gray-200\" data-title></div></div></div>"
                    }' class="hidden selectElement">
                        <option value="">Choose</option>
                        @foreach ($majors as $major)
                            <option value="{{ $major->id }}">{{ $major->major_name }}</option>
                        @endforeach
                    </select>

Error Code

"Uncaught TypeError: window.$hsSelectCollection is undefined"

Console Window

how to handle it? I was stuck for 3 days

I want to get the value of the select change, and send it to the Livewire Component with the livewire dispatchTo event

Answer 1

I have found the answer, just need to add jquery in the public folder and use @push which goes to the layout component