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

実現したいこと

Laravel 10 で 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 で見た時には問題なく表示しています。なにか解決のヒントになりますか?

コメントを投稿

0 コメント