Antigravity アプリケーションの開発からデプロイまでの過程で、ビルドエラーやデプロイ失敗に遭遇することは避けられません。しかし、多くのエラーは共通したパターンを持ち、適切な診断と対処法があれば迅速に解決できます。
ここでAntigravity で最も一般的なビルド・デプロイエラーと、それぞれの解決方法を実践的に解説します。
エラー診断の基本フロー
ビルドやデプロイが失敗した時は、以下の順序で原因を特定してください。
ステップ1: エラーメッセージを読む
↓
ステップ2: 環境変数を確認
↓
ステップ3: npm/yarn の依存関係を確認
↓
ステップ4: Firebase 設定を確認
↓
ステップ5: ネットワーク接続を確認
↓
ステップ6: ブラウザのコンソールとネットワークタブをチェック
よくあるエラーと解決方法
エラー 1: npm Dependency Conflict（依存関係の競合）
症状: npm install 時に以下のようなエラーが出る
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! Found: react@18.0.0
npm ERR! Could not find a version that matches "react@17.0.0"
原因: package.json で指定されたパッケージバージョンが互いに競合している
解決方法 1: Legacy Peer Deps フラグを使用
npm install --legacy-peer-depsこのフラグは古い依存関係解決ロジックを使用し、互換性のないバージョンでも無視して進みます。
解決方法 2: package.json を手動編集
package.json を開き、バージョンを統一します。
{
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"next": "^14.0.0"
}
}その後、node_modules フォルダを削除して再インストール:
rm -rf node_modules package-lock.json
npm install解決方法 3: Yarn を使用
npm より依存関係解決が優れている Yarn を試してみてください。
yarn installエラー 2: Firebase Authentication Failed（Firebase 認証エラー）
症状: デプロイ時に以下のエラーが出る
Error: Authentication token failed to initialize
Cannot read property 'getAuth' of undefined
原因: Firebase Config が正しく環境変数に設定されていない
解決方法:
- 環境変数ファイルを確認
.env.local ファイルが存在し、以下の形式で正しく設定されているか確認:
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key_here
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id重要: 環境変数を変更した後は、ローカル開発サーバーを再起動してください。
# ローカルサーバーを終了（Ctrl+C）
# その後、再度起動
npm run dev- Firebase Console で API キーを確認
Firebase Console にログインし、プロジェクト設定で API キーが正しいか確認:
Project Settings > Your apps > Config
- コード側の Firebase 初期化を確認
// lib/firebase.ts
import { initializeApp } from 'firebase/app';
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};
// undefined が含まれていないか確認
console.log('Firebase Config:', firebaseConfig);
const app = initializeApp(firebaseConfig);
export default app;エラー 3: CORS エラー（Cross-Origin Resource Sharing）
症状: ブラウザのコンソールに以下のエラーが出る
Access to XMLHttpRequest at 'https://api.example.com' from origin
'https://my-app.firebaseapp.com' has been blocked by CORS policy
原因: 外部 API がリクエスト元のドメインからのアクセスを許可していない
解決方法 1: API 側で CORS を設定（最適）
外部 API のプロバイダーに CORS 設定をリクエストしてください。Firebase Hosting のドメイン（https://your-project.web.app）をホワイトリストに追加してもらいます。
解決方法 2: Next.js API Routes で中継（推奨）
API を直接呼び出さず、Next.js の API Routes を経由させます。
// app/api/external-api/route.ts
export async function GET(req: Request) {
try {
const response = await fetch('https://api.example.com/data', {
headers: {
'Authorization': `Bearer ${process.env.API_KEY}`,
},
});
const data = await response.json();
return Response.json(data);
} catch (error) {
return Response.json({ error: 'Failed to fetch' }, { status: 500 });
}
}クライアント側から呼び出し:
// components/DataFetcher.tsx
const response = await fetch('/api/external-api');
const data = await response.json();解決方法 3: CORS プロキシを使用（暫定対策）
CORS プロキシサービスを経由させます。ただし、本番環境では推奨されません。
// 暫定対策のみ
const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
const response = await fetch(proxyUrl + 'https://api.example.com/data');エラー 4: Preview Not Loading（プレビューが読み込まれない）
症状: Antigravity のプレビューパネルが空白または読み込み中のままになる
原因:
- JavaScript エラーがコード内にある
- 環境変数が不正
- Firebase の初期化に失敗している
解決方法:
- ブラウザのコンソールを開く
プレビューパネルで F12 キーを押してデベロッパーツールを開き、コンソール タブで赤いエラーメッセージを確認します。
- 一般的なエラーメッセージごとの対処法
"Cannot find module 'firebase'"
→ npm install firebase を実行
"process is not defined"
→ クライアント側で process.env を使用していないか確認
(NEXT_PUBLIC_ プレフィックスなしの環境変数は使用不可)
"Uncaught TypeError: Cannot read property 'auth' of undefined"
→ Firebase 初期化コードを確認し、コンポーネント内で use client を追加
- Firebase の初期化順序を確認
Firebase は必ずコンポーネントの外で初期化してください。
// ✅ 正しい方法
// lib/firebase.ts (最上位)
import { initializeApp } from 'firebase/app';
const app = initializeApp(firebaseConfig);
// components/MyComponent.tsx
'use client';
import { app } from '@/lib/firebase';
import { getAuth } from 'firebase/auth';
const auth = getAuth(app);エラー 5: Agent Timeout（エージェントがタイムアウト）
症状: Antigravity でコード生成中に "Agent timeout" または "Request timeout" エラーが出る
原因: ネットワーク遅延、または AI Studio のサーバー側で処理に時間がかかっている
解決方法:
- ネットワーク接続を確認
インターネット接続が安定しているか確認してください。特に海外のネットワークの場合、VPN を使用すると改善することもあります。
- リクエストを簡潔にする
複雑で長いプロンプトは、より多くの処理時間が必要です。具体的でシンプルなリクエストに分割してください。
❌ 複雑なリクエスト:
「ユーザーダッシュボードを作成してください。
ユーザーリスト、検索機能、編集機能、削除機能、
複雑な権限管理、レポート生成、ダークモード...」
✅ シンプルなリクエスト:
「ユーザーリストコンポーネントを作成。
Firestore からデータ取得し、テーブルで表示。
編集ボタンと削除ボタンを追加してください。」
- キャッシュをクリア
ブラウザのキャッシュをクリアし、ページを再読み込みしてください。
Chrome: Ctrl + Shift + Delete (Windows) / Cmd + Shift + Delete (Mac)
- 別のブラウザで試す
Firefox や Safari など別のブラウザで試すと、タイムアウト問題が解決することもあります。
エラー 6: Package Version Incompatibility（パッケージバージョン不互換）
症状: 実行時に以下のようなエラーが出る
Error: The requested module '@react-pdf/renderer' does not provide an export named 'Document'
原因: インストールされたパッケージのバージョンが、コード内で想定されているバージョンと異なっている
解決方法:
- パッケージのバージョンを確認・固定
package.json で、問題のあるパッケージを明示的なバージョンに変更:
{
"dependencies": {
"@react-pdf/renderer": "^3.3.0"
}
}- node_modules を削除して再インストール
rm -rf node_modules package-lock.json
npm install- 最新バージョンにアップグレード
npm update @react-pdf/renderer- 古いバージョンを使用する（互換性のため）
npm install @react-pdf/renderer@2.3.0デプロイ前のチェックリスト
デプロイの前に、以下の項目を確認してください。
□ npm install は正常に完了した
□ npm run build が成功した
□ .env.local に必要な環境変数がすべて設定されている
□ Firebase Console でプロジェクトが有効になっている
□ ローカル開発サーバーで動作確認した
□ コンソールにエラーメッセージがないことを確認
□ 外部 API の CORS 設定は完了した
□ 機密情報（API キー）を .gitignore に追加した
全体を振り返って
Antigravity のビルド・デプロイエラーの大部分は、環境変数、依存関係、Firebase 設定の 3 点に集約されます。エラーが発生した時は、落ち着いてエラーメッセージを読み、上記のチェックリストに従って診断することで、迅速に解決できます。
トラブルシューティングは、開発スキルの向上にもつながります。Antigravity Community でコミュニティに質問することも遠慮なくしてください。