Решение проблем⚓︎

Здесь, в штаб-квартире Livewire, мы стараемся убирать препятствия с вашего пути еще до того, как вы с ними столкнетесь. Однако иногда возникают проблемы, которые мы не можем решить, не создав новых, а в других случаях — проблемы, которые мы просто не можем предвидеть.

Вот некоторые распространённые ошибки и ситуации, с которыми вы можете столкнуться в своих приложениях Livewire.

Несоответствия компонентов⚓︎

При взаимодействии с компонентами Livewire на странице вы можете столкнуться со странным поведением или сообщениями об ошибках, подобными следующим:

Error: Component already initialized

Error: Snapshot missing on Livewire component with id: ...

Существует множество причин, по которым вы можете увидеть эти сообщения, но самая распространённая — это когда вы забываете добавить wire:key к элементам и компонентам внутри цикла @foreach.

Добавление `wire:key`⚓︎

Каждый раз, когда в ваших шаблонах Blade есть цикл, например @foreach, вам нужно добавить wire:key к открывающему тегу первого элемента внутри цикла:

@foreach($posts as $post)
    <div wire:key="{{ $post->id }}">
        ...
    </div>
@endforeach

Это гарантирует, что Livewire сможет отслеживать различные элементы в цикле при его изменении.

То же самое относится к компонентам Livewire внутри цикла:

@foreach($posts as $post)
    <livewire:show-post :$post :wire:key="$post->id" />
@endforeach

Однако есть один хитрый сценарий, о котором вы могли не догадываться:

Когда компонент Livewire глубоко вложен внутрь цикла @foreach, вам ВСЁ РАВНО нужно добавить к нему ключ. Например:

@foreach($posts as $post)
    <div wire:key="{{ $post->id }}">
        ...
        <livewire:show-post :$post :wire:key="$post->id" />
        ...
    </div>
@endforeach

Без ключа на вложенном компоненте Livewire фреймворк не сможет сопоставить компоненты цикла между сетевыми запросами.

Префиксы ключей⚓︎

Ещё один хитрый сценарий, с которым вы можете столкнуться, — это наличие дублирующихся ключей в одном и том же компоненте. Это часто происходит из-за использования ID моделей в качестве ключей, которые иногда могут конфликтовать.

Вот пример, где нам нужно добавить префиксы post- и author-, чтобы обозначить каждый набор ключей как уникальный. В противном случае, если у вас есть модели $post и $author с одинаковым ID, произойдет коллизия ID:

<div>
    @foreach($posts as $post)
        <div wire:key="post-{{ $post->id }}">...</div>
    @endforeach

    @foreach($authors as $author)
        <div wire:key="author-{{ $author->id }}">...</div>
    @endforeach
</div>

Несколько экземпляров Alpine⚓︎

При установке Livewire вы можете столкнуться с сообщениями об ошибках следующего вида:

Error: Detected multiple instances of Alpine running

Alpine Expression Error: $wire is not defined

Если это так, скорее всего, на одной странице запущены две версии Alpine. Livewire включает в себя собственный бандл Alpine «под капотом», поэтому вы должны удалить любые другие версии Alpine на страницах Livewire в вашем приложении.

Один из распространенных сценариев, в котором это происходит, — добавление Livewire в существующее приложение, которое уже содержит Alpine. Например, если вы установили стартовый набор Laravel Breeze, а затем добавили Livewire, вы столкнетесь с этой проблемой.

Решение простое: удалите лишний экземпляр Alpine.

Удаление Alpine из Laravel Breeze⚓︎

Если вы устанавливаете Livewire внутри существующего Laravel Breeze (версия Blade + Alpine), вам нужно удалить следующие строки из resources/js/app.js:

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

Удаление CDN-версии Alpine⚓︎

Поскольку Livewire версии 2 и ниже не включал Alpine по умолчанию, вы могли подключить Alpine через CDN в теге script в заголовке вашего макета. В Livewire v3 вы можете полностью удалить этот CDN, и Livewire автоматически предоставит Alpine за вас:

    ...
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>

Примечание: вы также можете удалить любые дополнительные плагины Alpine, так как Livewire включает в себя все плагины Alpine, кроме @alpinejs/ui.

Отсутствие `@alpinejs/ui`⚓︎

Входящая в состав Livewire версия Alpine включает все плагины Alpine, ЗА ИСКЛЮЧЕНИЕМ @alpinejs/ui. Если вы используете headless-компоненты из Alpine Components, которые полагаются на этот плагин, вы можете столкнуться с ошибками вида:

Uncaught Alpine: no element provided to x-anchor

Чтобы исправить это, вы можете просто подключить плагин @alpinejs/ui через CDN в вашем файле макета следующим образом:

    ...
    <script defer src="https://unpkg.com/@alpinejs/ui@3.13.7-beta.0/dist/cdn.min.js"></script>
</head>

Примечание: обязательно используйте последнюю версию этого плагина, которую можно найти на странице документации любого компонента.