Lravel10 livewire3 Alpine でjsエラーになってしまう場合の対処法

Laravelでは、VueやReactも利用可能ですが、Livewire、Alpineの利用が勧められています。
スターターキットの一般的な会員登録機能が含まれた Laravel Breeze もLivewireとAlpineJSによって構築されています。

LaravelでAlpineを使用する際は、resources/js/app.js に

app.js

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

を追記することで、AlpineJSが利用可能になるのですが、Livewire3からはAlpineが既に組み込まれており、事前設定済みの状態のため、app.jsに同様の記載がある場合、競合が発生し、Javascriptのエラーが発生します。
一見、動作ができてしまう場合もあるためわかりづらいですが、動作がおかしい場合はこちらが原因となる場合も多いかと思います。

また、Livewireを利用せず、AlpineJS だけを利用したい場合には、そのままではAlpineが動作しないため、Alpineのみ利用したいページでは、viewファイル上に

@livewireScripts

の記載が必要になります。