Alpine error: no element provided to x-anchor

The error you're encountering, "no element provided to x-anchor," typically means that Alpine.js is unable to find the element you're referencing with x-anchor. This is often due to the element not being present in the DOM when Alpine.js tries to access it.

In your case, it looks like you're trying to reference an element with the ID alpine-popover-button. To resolve this issue, you need to ensure that the element with this ID exists and is accessible when Alpine.js initializes.

Here's a step-by-step solution:

1. Ensure the ID is correctly set on the button element: Make sure that the button element has the ID alpine-popover-button.

2. Ensure the ID is unique: Make sure that the ID alpine-popover-button is unique within the DOM.

3. Ensure the button is rendered before the panel: Make sure that the button element is rendered in the DOM before the panel element.

Here's how you can modify your code to ensure these conditions are met:

panel.blade.php

@props(['position' => 'bottom-center'])

<div
    x-popover:panel
    x-cloak
    x-transition.out.opacity
    x-anchor.{{ $position }}.offset.1="document.getElementById('alpine-popover-button')"
    {{ $attributes->merge([
        'class' => 'absolute left-0 mt-2 bg-white rounded-md',
    ]) }}
>
    {{ $slot }}
</div>

schools.blade.php

@props(['filters'])

<x-popover>
    <div class="flex flex-row">
        <div class="mr-2 mt-2">
            <x-heroicons.funnelSolidMicro/>
        </div>
        <x-popover.button id="alpine-popover-button" class="flex items-center gap-2 rounded-lg border pl-3 pr-2 py-1 text-gray-600 text-sm">
            <div>Filter</div>
            <x-heroicons.chevronDown/>
        </x-popover.button>
    </div>

    <x-popover.panel class="border border-gray-100 shadow-xl z-10 w-64 overflow-hidden">
        <div class="flex flex-col divide-y divide-gray-100">
            @foreach ($filters->schools() as $school)
                <label class="flex items-center px-3 py-2 gap-2 cursor-pointer hover:bg-gray-100">
                    <input value="{{ $school->id }}" wire:model.live="filters.selectedProductIds" type="checkbox" class="rounded border-gray-300">
                    <div class="text-sm text-gray-800">{{ $school->name }}</div>
                </label>
            @endforeach
        </div>
    </x-popover.panel>
</x-popover>

Explanation:

1. ID Assignment: The id="alpine-popover-button" is added to the x-popover.button element to ensure it has the correct ID.
2. Reference in Panel: The x-anchor directive in the panel.blade.php is updated to reference this ID directly.

By ensuring the button has the correct ID and is rendered before the panel, Alpine.js should be able to find the element and the error should be resolved.