Datepicker component partially breaks when used with AlpineJs in Laravel 9.x app

[gkimpson]

I have a Laravel 9.x app that uses AlpineJs in app.js (latest version of AlpineJs 3.x) - when I use the datepicker component it duplicates the days row and the selected date doesn't always work. This only happens when AlpineJs is integrated and the Alpine.start() line in resources/js/app.js is active - when I comment the line out everything seems to work perfectly fine. Any ideas? (See screenshot below)

require('./bootstrap');
import Alpine from 'alpinejs';
window.Alpine = Alpine;

Alpine.start(); // when the line is commented out the datepicker seems to work as expected

Console log errors

alpinejs:5 Uncaught ReferenceError: day is not defined
    at eval (eval at <anonymous> (alpinejs:5:648), <anonymous>:3:32)
    at alpinejs:5:985
    at qt (alpinejs:1:4878)
    at alpinejs:5:27821
    at r (alpinejs:5:15722)
    at Object.Mr [as effect] (alpinejs:5:15510)
    at K (alpinejs:1:375)
    at alpinejs:1:488
    at Function.<anonymous> (alpinejs:5:27814)
    at r (alpinejs:5:1705)

This also appears in the warnings

Alpine Expression Error: day is not defined

Expression: "day"
<div x-text="day" class="text-gray-800 font-medium text-center text-xs uppercase cursor-default">Sat</div>

Code-wise the error appears to be here in the template

        <div class="flex flex-wrap mb-3 -mx-1">
            <template x-for="(day, index) in DAYS" :key="index">
            <div style="width: 14.26%" class="px-0.5">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs uppercase cursor-default"></div>
            </div>
            </template>
        </div>

[gkimpson]

Made a pull request - that seems to work :) AlpineJs 2.x link in the source was breaking it

[mkocansey]

@gkimpson
Did it work when you removed AlpineJs 2.x from the component and used your project's AlpineJs 3.x?

[gkimpson]

Thanks for the quick reply @mkocansey much appreciated - it worked in my AlpineJs 3.x app once I removed the following line from the datepicker component after running the artisan publish command - I did a pull request which I'm hoping should fix it also.

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>

[gkimpson]

https://github.com/mkocansey/bladewind/pull/18/commits

[mkocansey]

@gkimpson Thanks a lot for raising this. Fixed in current release v0.1.9