質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

解決済

2回答

585閲覧

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

sanokoyuki

総合スコア12

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2023/11/13 08:51

編集2023/11/13 10:35

実現したいこと

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 はローカルループバックでアクセスできないように思うのですが、こうなるのが正しいのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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を実行すれば済む。

投稿2023/11/13 10:59

kawax

総合スコア10377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sanokoyuki

2023/11/13 13:54

今回は 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

2023/11/13 13:55

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

0

自己解決

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

shell

1$ sudo ufw allow 5174

でポートを解放

vite.config.js

1import { defineConfig } from 'vite'; 2import laravel, { refreshPaths } from 'laravel-vite-plugin'; 3 4export default defineConfig({ 5server: { 6hmr: { 7host: '192.168.0.90', 8} 9}, 10plugins: [ 11laravel({ 12input: [ 13'resources/css/app.css', 14'resources/js/app.js', 15], 16refresh: [ 17...refreshPaths, 18'app/Livewire/**', 19], 20}), 21], 22});

package,json

1{ 2"private": true, 3"type": "module", 4"scripts": { 5"dev": "vite --host", 6"build": "vite build" 7}, 8"devDependencies": { 9"@tailwindcss/forms": "^0.5.7", 10"@tailwindcss/typography": "^0.5.10", 11"autoprefixer": "^10.4.16", 12"axios": "^1.6.1", 13"laravel-vite-plugin": "^0.8.1", 14"postcss": "^8.4.31", 15"tailwindcss": "^3.3.5", 16"vite": "^4.5.0" 17} 18}

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

投稿2024/02/04 14:39

sanokoyuki

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問