🚀 Erro Livewire + Alpine: no element provided to x-anchor

⚠️ Ao utilizar Livewire 4 com TallStack UI 3, pode ocorrer o seguinte erro:

livewire.js: Uncaught (in promise) Alpine: no element provided to x-anchor

💡 Esse problema está relacionado ao comportamento do Alpine.js ao tentar resolver o x-anchor sem um elemento válido.

🔧 A solução foi discutida e corrigida aqui:
https://github.com/tallstackui/tallstackui/issues/1226

📂 Arquivo afetado:
web\vendor\tallstackui\tallstackui\src\resources\views\components\floating\main.blade.php

✨ Ajuste aplicado

@php $customization = $classes();
@endphp

whereStartsWith('x-on') }}
@if (!$ts_ui__flash)
    @if (count($attributes->whereStartsWith('x-transition')->getAttributes()) === 0 || $transition?->isEmpty())
        x-transition:enter="transition duration-100 ease-out"
        x-transition:enter-start="opacity-0 -translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 -translate-y-2"
    @elseif ($transition?->isNotEmpty())
        {{ $transition }}
    @else
        {!! $attributes->except(['x-show', 'x-anchor', 'class']) !!}
    @endif
@endif

x-effect="if ({{ $attributes->get('x-show', 'show') }}) $nextTick(() => {
    let anchor = ({{ $attributes->get('x-anchor', '$refs.anchor') }}) || $refs.button || $refs.anchor || null;
    if (anchor && $el.classList.contains('w-full'))
        $el.style.width = anchor.offsetWidth + 'px'
})"

{{ $attributes->except(['floating', 'x-anchor'])->merge([
    'class' => $attributes->get('floating', $customization['wrapper']),
    'data-floating' => true
]) }}>
{{ $slot }}
{{ $footer }}

📜 Código anterior (antes da correção)

@php
$customization = $classes();
@endphp

x-init="(() => {
    const anchor = (() => {
        try { return {{ $attributes->get('x-anchor', '$refs.anchor') }} }
        catch(e) { return null }
    })();

    if ($el.classList.contains('w-full') && anchor) {
        $watch('{{ $attributes->get('x-show', 'show') }}', v => {
            if (v) $nextTick(() => $el.style.width = anchor.offsetWidth + 'px')
        });

        let _r;
        new MutationObserver(() => {
            cancelAnimationFrame(_r);
            _r = requestAnimationFrame(() => $el.style.width = anchor.offsetWidth + 'px')
        }).observe($el, { childList: true, subtree: true })
    }

    if (anchor) {
        const overlay = anchor.closest('[x-data*=tallstackui_modal], [x-data*=tallstackui_slide]');
        if (overlay)
            overlay.addEventListener('close', () => {{ $attributes->get('x-show', 'show') }} = false)
    }
})()"

✅ Resultado: erro eliminado, comportamento do x-anchor estabilizado e compatibilidade restaurada com Alpine + Livewire.

🚀 Dica: sempre valide referências como $refs antes de utilizá-las em efeitos reativos no Alpine.

#livewire #alpinejs #tallstackui #laravel #frontend #webdev #javascript #bugfix #devtips #programacao