Laravel9 Alpine.jsをV2からV3にすると動かなくなった⇒原因と解決方法

Laravel8で作ったアプリをLaravel9にバージョンアップしました。

その際、package.jsonの各種バージョンも最新に更新しました。

ところが、AlpinejsのバージョンがV2からV3へ更新されたことにより、それまで動いていたAlpinejs部分の制御が動かなくなりました。

LaravelでAlpinejsをV2からV3へバージョンアップ

package.jsonの中身を見ると、

"alpinejs": "^2.7.3",

となっています。

これを、

"alpinejs": "^3.0.6",

にしました。

pakage.jsonの編集が終わったら、npm installとnpm run devをします。

ここで、下記のようなAplinejsで制御していた部分が動かなくなります。

<div x-cloak
    x-show="isOpen"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="transform opacity-0 scale-95"
        x-transition:enter-end="transform opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="transform opacity-100 scale-100"
        x-transition:leave-end="transform opacity-0 scale-95"
    @click.away="isOpen = false"
    class="dropdownlist absolute bg-white border border-gray-200 shadow-sm rounded-md text-white right-0 mt-4 px-4 py-2 overflow-auto z-30"
>

原因と解決方法

原因は、app/resources/js/app.js内に記載されているAlpinejsの読み込み部分が変更になっていたためでした。

https://alpinejs.dev/upgrade-guide#need-to-call-alpine-startでアナウンスされています。

修正前

require('./bootstrap');

require('alpinejs');

を下記のように修正します。

修正後

require('./bootstrap');

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

修正したら、再度npm intallとnpm run devを実行します。

これで無事、元通りに動くようになりました。