sylvain92's avatar

window and AlpineJS3

Hi I have an issue with Laravel 9 and Alpine3.

import Alpine from 'alpinejs';
import Choices from 'choices.js';

window.choices = (element) => {
    return new Choices(element, {
        maxItemCount: 4, removeItemButton: true
    });
}

window.Alpine = Alpine;

Alpine.start();

window.choices ans window.Alpine can compile, but not work in same time

dispatch.js:6 Uncaught RangeError: Maximum call stack size exceeded.
    at dispatch (dispatch.js:6:14)
    at Livewire.value (index.js:92:9)
    at dashboard:404:29
    at dispatch (app.js:1894:6)
    at Object.start (app.js:1949:3)
    at alpine.js:1696:23
    at dashboard:396:13
    at dispatch (dispatch.js:6:14)
    at Livewire.value (index.js:92:9)
    at dashboard:404:29

Make it in edit blade view

<div>
    <x-jet-label for="tags" value="{{ __('Tags') }}" />
    <select name="tags[]" id="create-post" multiple x-data="{}" x-init="function () { choices($el) }">
        @foreach($tags as $tag)
        <option value="{{ $tag->id }}" @if(in_array($tag->id, $oldTags))
            selected
            @endif
            >{{ $tag->name }}</option>
        @endforeach
    </select>
</div>

if I comment

this part

// window.Alpine = Alpine;
// Alpine.start();

Choice.js will work

if I comment this part

//import Choices from 'choices.js';

//window.choices = (element) => {
//   return new Choices(element, {
//       maxItemCount: 4, removeItemButton: true
//   });
//}

Livewire will work

but both can't work in same time

0 likes
5 replies
Sinnbeck's avatar

How are you using them? Sounds like you have livewire there as well

MohamedTammam's avatar

You have an infinite loop somewhere, Show us how choices works.

Tit's avatar
php artisan vendor:publish --tag=blade-ui-kit-confi

Edit file (comment line alphine) config\blade-ui-kit.php :

'assets' => [

        // 'alpine' => '//cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js',

]

Please or to participate in this conversation.