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にしたところ、問題が解消しました。

HTTP通信が原因のことも

ご利用の環境によって、本体はHTTPS通信で送信されるのに、CSSやJavaScriptファイルはHTTP通信で送信されるために、スタイルが崩れることもあります。

下記記事を参考にしてください。

さいごに

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

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

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

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

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

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

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

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

【無料プレゼント】

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

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

詳細はこちらをクリック

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。
Laravel10対応。Laravel11サポートガイドもご用意しています。詳しくは下記ボタンをクリック♪

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

最新版Laravel11用のサポートガイドご用意しています。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる
Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました