Can't get jQuery QueryBuilder to load in my Laravel + Livewire project

Hi everyone,

I'm trying to use jQuery QueryBuilder in my Laravel 10 app (with Livewire), but I can't get it to load — I keep getting undefined when I check $.fn.queryBuilder in the browser console.

Here’s what I have so far:

Blade Layout Head:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- QueryBuilder CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/query-builder.default.min.css">

<!-- QueryBuilder JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/query-builder.standalone.min.js"></script>


Livewire Component View 

<div id="builder"></div>

@push('scripts')
<script>
    $(document).ready(function () {
        console.log(typeof $.fn.queryBuilder); // Always returns undefined

        $('#builder').queryBuilder({
            filters: [
                { id: 'gender', label: 'Gender', type: 'string' }
            ]
        });
    });
</script>
@endpush

I tried both CDN and downloading the files manually to public/js and public/css, but I still get undefined. I’m not sure if it’s:

A loading order issue (maybe jQuery loads too late?)

A Livewire issue (because this is inside a Livewire component view)

A Laravel asset issue (maybe I need to use @vite instead of asset()?)

No console errors other than queryBuilder being undefined.

Has anyone successfully used jQuery QueryBuilder in a Laravel + Livewire setup? Do I need to initialize it differently (e.g. in window.onload or Livewire.hook())?

Any advice is appreciated!