Laravel jetstream app.jsについて

Question

LaravelのJetstreamでnpm run devをしたところ、public/js/app.jsが新たに変更があったのですが、そのapp.jsを読み込んだところ、うまく動作しなくなってしまいました。

原因として思い当たるのは、パッケージのバージョンをあげてしまったからかなと思うのですが、そもそもなぜ、app.jsの内容が変更されるのでしょうか？また、jsが動かなくなってしまった原因はなんでしょうか？

    "devDependencies": {
        "@tailwindcss/forms": "^0.3.3",
        "@tailwindcss/typography": "^0.4.1",
        "alpinejs": "^3.0.6",
        "autoprefixer": "^10.2.6",
        "axios": "^0.21",
        "laravel-mix": "^6.0.22",
        "lodash": "^4.17.21",
        "postcss": "^8.3.5",
        "postcss-import": "^14.0.2",
        "tailwindcss": "^2.2.0"
    }

自分で試してみたこと

console logを確認したが、特にエラーは出ていなかった。
npm run devした際も特にwebpackからはエラーが出ていなかった。

Answer 1

結論

Alpine.jsのバージョンが2.x -> 3.xになったため、一部で記述の変更をしなければいけないから。

// resources/js/app.js

// ???? Before
import 'alpinejs'

// ✅ After
import Alpine from 'alpinejs'

window.Alpine = Alpine

Alpine.start()

説明

原因として思い当たるのは、パッケージのバージョンをあげてしまったからかなと思うのですが

おそらく、この原因はあっていてAlpine.jsのバージョンを3.xにしたからだと思う。
というのも、7日前あたりに3.xに変わったから。メジャーアップデートでは仕様の変更もされるのでバージョンを上げる際にはchangelogなどを確認する癖をつけておかないと、意図しない場合がある。

公式ドキュメントにも、Upgrade from V2というページがわざわざ用意されているので確認する。

今回の場合だと、Need to call Alpine.start() after importを確認すれば良い。

Comments

[dogogu]

ありがとうございます。仰る通り変更したところ解決しました。