LoginSignup

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

npm run devで、cssのレイアウトが崩れます😭(Cloud9)

解決したいこと

私はlaravel10でwebアプリケーション開発をしています。開発環境はCloud9で、アセットの構築にはviteを用いています。
javascriptの動作を確認しながら開発を進めたいため、手間のかかるnpm run buildではなくnpm run devを実行したところ、cssのレイアウトが崩れてしまいます。(npm run buildでは問題なく表示されます。)
Dockerは使用していません。
npm run devを実行しても、cssのレイアウトが崩れない解決策を教えていただきたいです。

発生している問題・エラー

スクリーンショット 2024-03-28 122648.png

また、関係あるかはわかりませんが、/ public/ build/ assetフォルダのcssファイルを確認したところ、エラーが出ていました。
スクリーンショット 2024-03-28 124146.png

該当するソースコード

npm run dev

自分で試したこと

vite を起動するとデフォルトでは、5173port を利用するため開放する必要があると聞いたため、package.json の修正(もしくは vite.config.js の修正)を行いました。
デフォルとの状態だと、package.json の scripts で "dev": "vite" が設定されているので、 "dev": "vite --host" へ修正しました。

    "scripts": {
        "dev": "vite --host",
        "build": "vite build"
    }

もしくは vite.config.js に server: { host: true } を追記しました。

export default defineConfig({
    server: {
        host: true,
    },
});

いずれの方法でも解決しませんでした。
ご回答のほど、どうかよろしくお願いいたします。🙇‍♂️

追記(2024/03/31)

ご回答を参考に追記します。😊

ご回答を受けて、そういえばディベロッパーツールで確認をしていなかったことに気づかされたため、レイアウトが崩れた画面でディベロッパーツールを開き、ネットワークタブとコンソールタブを確認したところ、以下のエラーが出ていました!
スクリーンショット 2024-03-31 093110.png
こちらのエラーも解決の糸口になりそうでした。
ご回答をいただき、今回、改めてディベロッパーツールの重要性を認識しました。今後は真っ先に確認します!🙆‍♂️

1

2Answer

なんで「Cloud9を使ってる」という一番重要な情報を書いてないのか。
Cloud9が原因。
原因が分かれば検索できるので詳しくは書かない。
「Cloud9 vite npm run dev」とかで検索すればいいだけ。

それよりもCloud9使うのをやめたほうがいい。
手元のPCで開発するのが常識。
Cloud9を日常的に使ってる人なんていない。
騙されてる初心者だけ。
初心者しか使ってないのに初心者には解決できないCloud9特有のトラブルが多い。

4

Comments

  1. @taigatomonaga

    Questioner

    ご回答ありがとうございます!🙌

    無事解決できそうです!
    仮想ファイルシステム(VFS:Virtual File System)への接続が存在せず、解決するにはサードパーティークッキーが許可されていないため、許可する必要があるとのことでした! すぐに検証します!

    cloud9については質問に追記させていただきます!

    また、cloud9には初心者に解決できない特有のトラブルが多いとのことですので、その他、VScodeなどの開発環境での開発も今後検討いたします!

    ありがとうございます!😊

Comments

  1. @taigatomonaga

    Questioner

    ご回答ありがとうございます!🙌

    ありがたいことに無事解決できそうですが、こちらも確認してみます!

    ありがとうございます!😊

Your answer might help someone💌