$screen seems to be broken in combination with Livewire

I have a fairly complex setup and I first thought that it was the reason that it did not work anymore.

However see the simple code below that currently does not work with $screen('sm'), and gives this error: Uncaught ReferenceError: $screen is not defined

<script src="https://cdn.jsdelivr.net/gh/alpine-collective/alpine-magic-helpers@1.1.x/dist/index.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
 
<div x-data="">
    <div x-show="$screen('sm')">
        SHOW ON > SM ONLY (DOES NOT WORK)
    </div>
</div>

{{-- remove this line and it works... --}}
@livewireScripts

You can toy around here where I also added my usecase with an x-data function: https://laravelplayground.com/#/snippets/81b039fe-6a65-479b-aa40-d17bc37d7b75 (go to livewire.blade.php)

Note:

• I included alpine-magic-helpers first, then AlpineJS
• there is even no Livewire component in the playground active

I think there is something wrong with the registration of the $screen helper

[SimoTod]

Yeah, it works okay if you follow the defer rule we discussed above but if you put the library before livewire without defer, livewire will just override the code. 😦

[KevinBatdorf]

Could PR livewire too I suppose!