トラブルシューティング
ここ Livewire HQ では、皆様が問題に遭遇する前に、その原因を取り除くように努めています。しかし、新しい問題を引き起こさずに解決できない問題や、予測できない問題も時には存在します。Here at Livewire HQ, we try to remove problems from your pathway before you hit them. However, sometimes, there are some problems that we can't solve without introducing new ones, and other times, there are problems we can't anticipate.
ここでは、Livewire アプリで遭遇する可能性のある一般的なエラーとシナリオをいくつか紹介します。Here are some common errors and scenarios you may encounter in your Livewire apps.
コンポーネントのミスマッチComponent mismatches
ページ上の Livewire コンポーネントを操作する際、以下のような奇妙な動作やエラーメッセージが発生する可能性があります。When interacting with Livewire components on your page, you may encounter odd behavior or error messages like the following:
Error: Component already initialized
Error: Snapshot missing on Livewire component with id: ...
これらのメッセージが表示される理由はたくさんありますが、最も一般的なのは、@foreach ループ内の要素やコンポーネントに wire:key を追加し忘れることです。There are lots of reasons why you may encounter these messages, but the most common one is forgetting to add wire:key to elements and components inside a @foreach loop.
wire:key の追加Adding wire:key
@foreach のようなものを使用して Blade テンプレートでループを使用する場合は常に、ループ内の最初の要素の開始タグに wire:key を追加する必要があります。Any time you have a loop in your Blade templates using something like @foreach, you need to add wire:key to the opening tag of the first element within the loop:
@foreach($posts as $post)
<div wire:key="{{ $post->id }}"> <!-- [tl! highlight] -->
...
</div>
@endforeach
これにより、ループが変更されたときに、Livewire がループ内のさまざまな要素を追跡できるようになります。This ensures that Livewire can keep track of different elements in the loop when the loop changes.
これは、ループ内の Livewire コンポーネントにも当てはまります。The same applies to Livewire components within a loop:
@foreach($posts as $post)
<livewire:show-post :$post :key="$post->id" /> <!-- [tl! highlight] -->
@endforeach
ただし、想定していなかった可能性のある、トリッキーなシナリオを次に示します。However, here's a tricky scenario you might not have assumed:
@foreach ループ内に深くネストされた Livewire コンポーネントがある場合でも、キーを追加する必要があります。 例：When you have a Livewire component deeply nested inside a @foreach loop, you STILL need to add a key to it. For example:
@foreach($posts as $post)
<div wire:key="{{ $post->id }}">
...
<livewire:show-post :$post :key="$post->id" /> <!-- [tl! highlight] -->
...
</div>
@endforeach
ネストされた Livewire コンポーネントにキーがない場合、Livewire はネットワークリクエスト間でループされたコンポーネントを一致させることができません。Without the key on the nested Livewire component, Livewire will be unable to match the looped components up between network requests.
キーのプレフィックスPrefixing keys
発生する可能性のあるもう 1 つのトリッキーなシナリオは、同じコンポーネント内に重複するキーがあることです。 これは、モデル ID をキーとして使用することが原因であることが多く、競合が発生する可能性があります。Another tricky scenario you may run into is having duplicate keys within the same component. This often results from using model IDs as keys, which can sometimes collide.
各キーのセットを一意として指定するために post- および author- プレフィックスを追加する必要がある例を次に示します。 それ以外の場合、同じ ID を持つ $post および $author モデルがある場合は、ID の衝突が発生します。Here's an example where we need to add a post- and an author- prefix to designate each set of keys as unique. Otherwise, if you have a $post and $author model with the same ID, you would have an ID collision:
<div>
@foreach($posts as $post)
<div wire:key="post-{{ $post->id }}">...</div> <!-- [tl! highlight] -->
@endforeach
@foreach($authors as $author)
<div wire:key="author-{{ $author->id }}">...</div> <!-- [tl! highlight] -->
@endforeach
</div>
Alpine の複数のインスタンスMultiple instances of Alpine
Livewire をインストールすると、次のようなエラーメッセージが表示される場合があります。When installing Livewire, you may run into error messages like the following:
Error: Detected multiple instances of Alpine running
Alpine Expression Error: $wire is not defined
この場合、同じページで 2 つのバージョンの Alpine が実行されている可能性があります。 Livewire には、内部で Alpine の独自のバンドルが含まれているため、アプリケーションの Livewire ページにある他のすべての Alpine バージョンを削除する必要があります。If this is the case, you likely have two versions of Alpine running on the same page. Livewire includes its own bundle of Alpine under the hood, so you must remove any other versions of Alpine on Livewire pages in your application.
これが起こる一般的なシナリオの 1 つは、Alpine がすでに含まれている既存のアプリケーションに Livewire を追加することです。 たとえば、Laravel Breeze スターターキットをインストールしてから Livewire を後で追加すると、これが発生します。One common scenario in which this happens is adding Livewire to an existing application that already includes Alpine. For example, if you installed the Laravel Breeze starter kit and then added Livewire later, you would run into this.
これに対する修正は簡単です。余分な Alpine インスタンスを削除します。The fix for this is simple: remove the extra Alpine instance.
Laravel Breeze の Alpine の削除Removing Laravel Breeze's Alpine
既存の Laravel Breeze (Blade + Alpine バージョン) 内に Livewire をインストールする場合は、resources/js/app.js から次の行を削除する必要があります。If you are installing Livewire inside an existing Laravel Breeze (Blade + Alpine version), you need to remove the following lines from resources/js/app.js:
import './bootstrap';
import Alpine from 'alpinejs'; // [tl! remove:4]
window.Alpine = Alpine;
Alpine.start();
CDN バージョンの Alpine の削除Removing a CDN version of Alpine
Livewire バージョン 2 以前には Alpine がデフォルトで含まれていなかったため、レイアウトのヘッダーにスクリプトタグとして Alpine CDN を含めている可能性があります。 Livewire v3 では、この CDN を完全に削除でき、Livewire が自動的に Alpine を提供します。Because Livewire version 2 and below didn't include Alpine by default, you may have included an Alpine CDN as a script tag in the head of your layout. In Livewire v3, you can remove this CDN altogether, and Livewire will automatically provide Alpine for you:
...
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <!-- [tl! remove] -->
</head>
注：@alpinejs/ui を除くすべての Alpine プラグインが Livewire に含まれているため、他の Alpine プラグインも削除できます。Note: you can also remove any additional Alpine plugins, as Livewire includes all Alpine plugins except @alpinejs/ui.
@alpinejs/ui がありませんMissing @alpinejs/ui
Livewire のバンドルされた Alpine バージョンには、@alpinejs/ui を除くすべての Alpine プラグインが含まれています。 Alpine Components のヘッドレスコンポーネントを使用している場合、このプラグインに依存しているため、次のようなエラーが発生する可能性があります。Livewire's bundled version of Alpine includes all Alpine plugins EXCEPT @alpinejs/ui. If you are using headless components from Alpine Components[https://alpinejs.dev/components], which relies on this plugin, you may encounter errors like the following:
Uncaught Alpine: no element provided to x-anchor
これを修正するには、次のように、レイアウトファイルに @alpinejs/ui プラグインを CDN として含めるだけです。To fix this, you can simply include the @alpinejs/ui plugin as a CDN in your layout file like so:
...
<script defer src="https://unpkg.com/@alpinejs/ui@3.13.7-beta.0/dist/cdn.min.js"></script> <!-- [tl! add] -->
</head>
注：任意のコンポーネントのドキュメントページ で確認できる、このプラグインの最新バージョンを必ず含めてください。Note: be sure to include the latest version of this plugin, which you can find on any component's documentation page[https://alpinejs.dev/component/headless-dialog/docs].