npm run dev を実行するとレイアウトが崩れる

Question

実現したいこと

Laravel 10 で npm run dev を実行すると、画面の表示が崩れます。

• npm run dev 実行時のレイアウト崩れを正しく表示できるようにしたい。

前提

Laravel については初心者です。
Laravel 10 で Jetstream を使ってサイトを作成しています。
昨日までは普通に動いていたのですが、
$ sail up -d
$ npm run dev
今日立ち上げると大きくレイアウトが崩れています。
npm を Q で止めてブラウザをリロードすると正しく表示されます。

一応可能性があるかもしれませんが、app.css と app.js は初期状態に戻し、public\build\assets 内の app-xxxxxx.css と app-xxxxxx.js はいったん削除し、
$ npm run build
をかけて再作成しています。

発生している問題・エラーメッセージ

特にエラーメッセージは表示されていません。

該当のソースコード

どこを見ればいいのかわかりません。

試したこと

$ sail up -d
$ npm run dev

こうするとブラウザで画面表示が崩れます。
Q で npm run dev を終了してブラウザを再読み込みすると正常に表示されます。

resouces\css\app.css と resouces\css\app.js は初期状態に戻しました。
public\build\assets 内の app-xxxxxx.css と app-xxxxxx.js はいったん削除し、

$ npm run build

をかけて再作成しましたが変わりません。

https://rinoguchi.net/2021/11/npm-version-up-and-fix-audit.html
こちらを参考に

$ sudo npm install -g npm-check-updates
$ ncu
$ ncu -u
$ npm install

補足情報（FW/ツールのバージョンなど）

具体的に何を書けばいいでしょうか？

2023/11/13 追記

サーバは Ubuntu サーバでクライアントは WIndows10 の Firefox と Chrome でチェックしていました。
開発は Windows10 の VScode で行っています。
クライアント側で表示した場合はレイアウトが崩れているのですが、サーバの Firefox と Chrome で見た時には問題なく表示しています。なにか解決のヒントになりますか？

再追記分
npm run dev の際に VSCode で「ポート 5173 で実行されているアプリケーションは使用可能です」と表示されています。
Windows は何度か再起動（シャットダウン→電源オンではなく再起動）をかけていますが改善されません。

再々追記分
ソースを確認してみました。
npm run dev 実行前のヘッダのソース部分

<!-- Scripts -->
<link rel="preload" as="style" href="http://192.168.0.90/build/assets/app-41663a6a.css">
<link rel="modulepreload" href="http://192.168.0.90/build/assets/app-22752a76.js">
<link rel="stylesheet" href="http://192.168.0.90/build/assets/app-41663a6a.css" data-navigate-track="reload">
<script type="module" src="http://192.168.0.90/build/assets/app-22752a76.js" data-navigate-track="reload"></script>
※ 192.168.0.90 は Ubuntu サーバの IP アドレス

npm run dev 実行後のヘッダのソース部分

<!-- Styles -->
<script type="module" src="http://127.0.0.1:5173/@vite/client" data-navigate-track="reload"></script>
<link rel="stylesheet" href="http://127.0.0.1:5173/resources/css/app.css" data-navigate-track="reload">
<script type="module" src="http://127.0.0.1:5173/resources/js/app.js" data-navigate-track="reload"></script>

127.0.0.1 はローカルループバックでアクセスできないように思うのですが、こうなるのが正しいのでしょうか？

Answer 1

2022年6月以降はViteに変わったので2021年なんて古い情報見ても無駄。

Windowsでだけ発生する現象なのでdevを使うならvite.config.jsを変更。
https://laravel.com/docs/10.x/vite#configuring-hmr-in-sail-on-wsl2

一番簡単なのはnpm run buildだけ使えばいい。
npm run devは使わなくてもいい。
必要な時に毎回手動でnpm run buildを実行すれば済む。

Comments

[sanokoyuki]

今回は WSL は使わずにサーバを立てて行っています。
npm run dev は便利なので何とか使いたかったのですが…。
で、URL を参考に色々試したところなんとか形になりました。

サーバ側で ufw が有効になっていたので、そこではじかれていたのが一つの原因だと思われます
（前は開放していなくていけたのになぁ…）。

$ sudo ufw allow 5174

でポートを解放

vite.config.js
```
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
server: {
hmr: {
host: '192.168.0.90',
}
},
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: [
...refreshPaths,
'app/Livewire/**',
],
}),
],
});
```

package,json
```
{
"private": true,
"type": "module",
"scripts": {
"dev": "vite --host",
"build": "vite build"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.10",
"autoprefixer": "^10.4.16",
"axios": "^1.6.1",
"laravel-vite-plugin": "^0.8.1",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5",
"vite": "^4.5.0"
}
}
```

これで動作するようになりました。

[sanokoyuki]

結局これが最適解なのかどうかはわかりません。
もし、どなたかもっといいやり方があるということであればご意見ください。

Answer 2

サーバ側で ufw が有効になっていたので、そこではじかれていたのが一つの原因だと思われます
（前は開放していなくていけたのになぁ…）。

$ sudo ufw allow 5174

でポートを解放

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
server: {
hmr: {
host: '192.168.0.90',
}
},
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: [
...refreshPaths,
'app/Livewire/**',
],
}),
],
});

{
"private": true,
"type": "module",
"scripts": {
"dev": "vite --host",
"build": "vite build"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.10",
"autoprefixer": "^10.4.16",
"axios": "^1.6.1",
"laravel-vite-plugin": "^0.8.1",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5",
"vite": "^4.5.0"
}
}

これで動作するようになりました。