メッセージ Your preview will appear here は、プレビューのプロセスがまだ動作するアプリを生成していないことを示しています。これは症状であり、根本的な原因ではありません。通常、ターミナルまたはブラウザのコンソールで最初に表示される赤い行が有用なヒントになります。

30秒での回答

  1. プラットフォームにアクティブなインシデントがあるか確認してください。
  2. プロジェクトのターミナルを開き、最初のビルドまたはランタイムのエラーをコピーしてください。
  3. npm run build を実行して、プレビューが隠しているエラーを表示してください。
  4. アプリがデータベースやAPIを使用する場合、このプロジェクトに必要なシークレットが存在するか確認してください。
  5. エージェントに正確なエラーを提示し、そのエラーで指定されたファイルまたは設定のみを変更してもらいます。

一般的な修正ボタンを押しっぱなしにせず、新しい結果を読む前に操作しないでください。1回の試行で別のエラーが発生した場合、別の変更を試す前に最後に動作したバージョンに戻してください。

ブランチ1 — プラットフォームが利用不可ですか？

まず公式のステータスページを開いてください。複数のプロジェクトが同時に読み込みできなくなった場合、またはステータスページがプレビューまたはビルドのインシデントを報告している場合、プロバイダーが復旧するのを待つ必要があります。インシデント中にコードを変更するとノイズが増加し、2番目の問題を引き起こす可能性があります。

1つのプロジェクトだけが失敗した場合、以下のプロジェクトのチェックに進んでください。

ブランチ2 — 最初のターミナルエラーを確認

Boltではコードビューに切り替え、ターミナルタブを開きます。Viteベースのプロジェクトでは以下のコマンドを実行してください：

bash

npm run build

最終的な failed または exit code 1 行から上方向に読み上げ、最初の具体的なエラーをコピーしてください。一般的な分岐は以下の通りです：

  • Module not found またはインポートエラー：ファイル、パッケージ、またはファイル名のケースが一致していない。
  • 文法または型のエラー：最近のコード変更がコンパイルされなかった。
  • 環境変数が不足している：アプリが必要なデータベースまたはAPIの設定が存在する前に起動した。
  • 依存関係のエラー：パッケージがプロジェクトに存在しないか、バージョンが競合している。

その正確な行をエージェントのチャットに貼り付け、指示として「まず根本的な原因を説明してください。まだ編集しないでください」と入力してください。説明がログと一致したら、1つの限定的な変更を依頼してください。

ブランチ3 — ビルドは通るがプレビューがまだ空欄

ブラウザの開発者ツールを開き、コンソールを選択し、プレビューを再読み込みしてください。最初の赤いランタイムエラーをコピーしてください。クリーンな本番ビルドでもブラウザで失敗することがあります。それはシークレットが不足している、APIリクエストがブロックされている、またはクライアントコードが未定義の値を読み取っているためです。

プロジェクトがSupabaseや他のAPIを使用する場合、プロジェクトの現在のシークレットまたは環境設定を確認してください。変数名を正確に確認し、フレームワークが要求する場合の任意のパブリックプレフィックスも含めます。決してシークレットの値をサポートフォーラムやAIプロンプトに貼り付けしないでください。

次に、拡張機能やVPNを一時的に無効にしてChromeブラウザでプレビューをテストしてください。それが動作する場合、プロジェクトコードが原因である可能性は低いです。1つずつブラウザやネットワークレイヤーを再有効にしてください。

ブランチ4 — 設定の変更が原因

エージェントが vite.config.ts、ルーティング、プロキシ、またはセキュリティヘッダーを編集した直後に失敗が発生した場合、その変更を最後に動作したバージョンと比較してください。変更の説明ができない場合は、最後に動作したチェックポイントを復元してください。その後、必要な最小限の設定のみを再適用してください。

プロジェクト全体をリセットしないでください。バージョンロールバックは安全です。なぜなら、既知の良いベースラインを提供し、破壊的な変更を明確にするからです。

修正の確認

プレビュー画像だけでは不十分です。以下の4つのチェックを確認してください：

  1. npm run build がエラーなく終了すること。
  2. ブラウザコンソールに再読み込み後にも新しい赤い例外が表示されないこと。
  3. 最初の画面が表示され、そのメインボタンまたはフォームが応答すること。
  4. 2番目のブラウザまたはシークレットウィンドウで同じプレビューが読み込まれること。

プレビューが1つのブラウザだけで動作する場合、アプリコードを変更するのではなく、拡張機能、キャッシュ、VPN、またはネットワークポリシーを調査し続ける必要があります。

それでも動作しない場合

最後に動作したバージョンに戻し、1つの小さな変更で失敗を再現してください。ターミナルエラー、コンソールエラー、ツール名、ブラウザ、およびそのトリガーとなったステップを保存してください。それらの詳細をプラットフォームの公式サポートチャネルに送信してください。APIキー、アクセストークン、プロジェクトシークレット、または個人データは含めないでください。

初心者向けのまとめ

AIに「すべてを修正してください」と依頼しないでください。ターミナルを開き、最初の赤いエラーをコピーし、その正確な行が何を引き起こしたか尋ねてください。npm run build を実行し、必要なシークレットを確認し、1つの変更を実行してください。新しい試行でより多くの問題が発生した場合、最後に動作したバージョンに戻してください。