MAMPで環境構築をしていると以下のエラーに遭遇しました。
Unable to locate file in Vite manifest: resources/sass/app.scss.
さっそくですが解決した方法をお伝えします。
【解決策】
- npm install --save-dev vite laravel-vite-plugin
- npm install --save-dev @vitejs/plugin-vue
- npm run build
上記のコマンドを実行すれば私の場合は解決しました。
それでは少し深堀りしてみます。
エラーの原因はなんだったのか？
主なエラーの原因はプラグインを導入できていなかったことです。Laravel公式サイトには以下のように説明があります。
Vueフレームワークを使用してフロントエンドを構築する場合は、プラグイン(@vitejs/plugin-vue)もインストールする必要があります
- npm install && npm run build
- php artisan ui vue --auth
上記のコマンドを実行するだけではプラグインの導入はされないということですね。
エラーの解決策
それでは上記の原因を踏まえたうえで解決策をもう一度お伝えします。
【解決策】
- npm install --save-dev vite laravel-vite-plugin
- npm install --save-dev @vitejs/plugin-vue
- npm run build
上記を実行すると無事にRegisterページに遷移しました。
私が参考にしたのはこちらのサイトです。
公式HPにはnpm install --save-dev vite laravel-vite-pluginのコマンドを実行するような記載はありませんが、Chat GPTによると実行する必要があるそうです。
laravel-vite-pluginはviteを依存関係に持っているため、単独でインストールすることはできません。したがって、npm install --save-dev vite laravel-vite-pluginのコマンドを実行する必要があります。
全てを信用することはできませんが、Chat GPTの見解ではコマンドを実行する必要があるみたいです(笑)
最後にnpm run buildを実行してbuildしなおしてあげましょう。
※こちらのコマンドを実行しないと私の場合はエラー解決できませんでした。
まとめ
初学者にとって環境構築は鬼門ですよね。
Unable to locate file in Vite manifest: resources/sass/app.scss.も解決するまで結構な時間を要してしまいました。
同じようなエラーに遭遇した人がこの記事で解決できることを祈っています。