Laravel9系でLaravel Breeezeを使った認証機能を導入するとVite manifest not found atとエラーが出てしまうときの対策

今回は表題通りLaravel9系でLaravel Breeezeを使った認証機能を導入するとVite manifest not found atとエラーが出てしまうときの対策」について書いてみたいと思います！

なお、検証環境はLaravel9.1及び9.2、PHPバージョンは8、Node.jsのバージョンは16系を採用しています。また、この時点でLaravel Breezeは導入済で、Laravelアプリケーションのトップページにアクセスすると、右上にregisterやloginへのリンクが表示されているものとします。

特にNode.jsのバージョンは公式にも書いてある通りバージョン16以上を必ず採用するようにしてください！

結論・Vite manifest not foundエラーが出てしまう方法の対策

結論からいうと、以下の手順でエラーが出ないように対処することが可能です。

１．以下のコマンドをターミナルに打ち込む

npm install --save-dev vite laravel-vite-plugin
npm install --save-dev @vitejs/plugin-vue

2.package.jsonを以下のように書き換えする

 "scripts": {
-     "dev": "npm run development",
-     "development": "mix",
-     "watch": "mix watch",
-     "watch-poll": "mix watch -- --watch-options-poll=1000",
-     "hot": "mix watch --hot",
-     "prod": "npm run production",
-     "production": "mix --production"
+     "dev": "vite",
+     "build": "vite build"
  }

ここまで行っていただければ、あとはnpm install及びnpm run devコマンドを実行していただければ、問題なく動くようになります。

エラーの原因・新しいLaravelでは何が起きているのか

では、表題のエラーについては何が原因だったのかをサクッと書いてみます（あくまで私の理解です）。

表題のエラーは、Laravel Breezeを使った認証はViteを使用することを前提として動くにも関わらず、Viteの環境がLaravel上に全く存在しなかったことが原因というものでした。

なので、先ほど行って頂いた作業は、Viteが動く環境をLaravel上にインストールしたよというものになります。

まとめ

ということで、ざっくりではありますが、Laravel9系でLaravel Breeezeを使った認証機能を導入するとVite manifest not found atとエラーが出てしまうときの対策についてブログにしてみました！