Laravel Viteでnpm run buildを行っても変更が反映されない原因と対策

Laravel Viteの使い方とエラー対策

Laravel Viteでnpm run buildを行っても、レイアウトが崩れたまま、Tailwind CSS等の変更が反映されない場合があります。

この場合、npm run devを止めた状態で、publicディレクトリの中に「hot」ファイルが残っていないか確認してください。

もし残っていたら、これを手動で削除します。

以上が解決法です。詳しく知りたい場合は、この先読んでくださいね。

Laravel Viteでnpm run buildを行っても変更が反映されない原因

Laravel Viteでは、npm run devを行うと、Viteサーバーが起動し、Tailwind CSSやVue.js等の変更をブラウザ側に即座に反映してくれます。

npm run devを実行中は、publicディレクトリの中にhotファイルができます。

このhotファイルは、npm run devを停止すると自動で削除されます。

ところが、node.jsのバージョンが古すぎたりすると、hotファイルが自動で消えず残っていたりします。

この状態でnpm run buildを実行すると、public/buildの中に本番環境用のファイルが作成され、さらにhotファイルも残った状態になります。

Viteとしては、hotファイルに書かれたViteサーバー情報をもとにViteサーバからcssを読み込もうとするものの、Viteが起動していないのでちゃんと反映されない!!という困った事態に陥ります。

そのため、こんな画面になってしまうのです。

このとき、chromeの検証ツールのコンソールを表示させていたら、下図のように、cssファイルやjsファイルが、Viteサーバーから読み込めないというエラーが発生しているのがわかります。

【Failed to load resource: net::ERR_CONNECTION_REFUSEDエラー発生】

Laravel Viteでnpm run buildを行っても変更が反映されない時の対策

ではどうしたら良いのか。

冒頭でお伝えしたとおり、hotファイルを削除してしまうのが手っ取り早い解決方法です。

ですが毎回行うのは面倒ですよね。

なぜこうなってしまう原因ですが、node.jsのバージョンが古すぎることが原因の場合があります。

node.jsのバージョンをチェックして、もし古すぎるようでしたら、公式サイトから新しいファイルをダウンロードしてnode.jsを更新しておきましょう。

ダウンロードしたファイルをダブルクリックして、インストールを進めてください。

なお2022年7月15日現在、推奨版は16.16.0となっています。

わたしのほうで検証していますが、バージョン12では、本件の問題が発生していましたが、バージョン16にしたところ、問題が解消しました。

さいごに

以上、Laravel Viteのエラー時の対策でした。

わたしはLaravel学習サイトを運営していますが、Laravel Viteになってから、色々と質問を頂くようになりました。

正直、システムが変わる時って色々と面倒ではありますが^^;ただ、Viteに代わったことでさらにLaravelが使いやすくなっていくと思っています。

Laravel Viteのエラー対策や使い方は、他の記事・動画でも解説しています。下記ページにまとめてあるので、併せて参考にしてくださいね。

Laravel Viteの使い方とエラー対策 Laravel・PHP豆知識・トラブル対策

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

社内にWebアプリ開発経験がなくて、困ってませんか?

「自社でWebアプリ開発を始めていきたい」
という企業様のために、Laravelセミナー・プログラミング教育を実施しています。

【セミナー使用スライド】

詳細はこちらご覧ください

Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました