このページでは、Firebase JavaScript SDK の使用時に発生する可能性のある JavaScript の問題に関するヒントとトラブルシューティングについて説明します。
その他の課題がある場合や、該当する問題が見つからない場合メインの Firebase のよくある質問で、Firebase 全体またはプロダクト固有のよくある質問をご覧ください。
報告された問題とトラブルシューティングの最新リストについては、Firebase JavaScript SDK GitHub リポジトリを参照し、独自の問題を報告することもできます。
Node.js コンストラクトの Admin SDK は Firebase JavaScript SDK と互換性がありません
Node.js の Firebase Admin SDK と Firebase JavaScript SDK は、インターフェース、クラス、関数の定義を共有しない、異なる実装です。 Admin SDK オブジェクトのインスタンスは、Firebase JavaScript SDK 関数と互換性がありません。
たとえば、Firebase JavaScript SDK getDatabase 関数に渡された Admin SDK の FirebaseApp のインスタンスは、次のエラーを生成します。
TypeError: Cannot read properties of undefined (reading 'getProvider')
at _getProvider
at getDatabase
これは、Realtime Database だけでなく、Firebase JavaScript SDK API サーフェス全体に当てはまります。
逆方向での使用についても同様です。Cloud Firestore JS SDK の Timestamp 型を Node.js の Firebase Admin SDK で使用しようとすると、同様のエラーが発生します。
競合するバージョンの Firebase JavaScript SDK を使用しないでください
プロジェクトで依存関係として構成された Firebase JavaScript SDK のバージョンが競合すると、SDK インスタンスが SDK パッケージ間で渡されるときにランタイム エラーが発生します。たとえば、FirebaseApp のバージョンが一致しない Data Connect ライブラリを使用すると、次のエラーが発生します。
Error: Component data-connect has not been registered yet
この問題は、Firebase SDK パッケージの一部ではなく 1 つの依存関係が更新された場合に一般的に発生します。この状況は、自動依存関係更新ツールがプロジェクトの yarn.lock ファイルまたは package-lock.json ファイル内の Firebase SDK 依存関係のサブセットを変更した場合によく発生します。多くの Firebase JavaScript SDK は相互に相互運用するため、さまざまなバージョンの SDK を使用すると、ランタイムの互換性が失われます。
この問題を解決するには、プロジェクトの node_modules/ ディレクトリと yarn.lock（yarn の場合）または package-lock.json（npm の場合）を削除し、依存関係を再インストールします。
エラーが解決しない場合は、npm ls コマンドを使用して問題をさらにデバッグします。これにより、プロジェクトの依存関係がログに記録され、競合するバージョンの firebase モジュールを特定できます。
たとえば、次のログは、package-using-older-firebase が競合するバージョンの Firebase JavaScript SDK をインポートしていることを示しています。
$ npm ls firebase --all
your-app@0.0.0
├── firebase@11.2.0
├─┬ @angular/fire@19.0.0
│ ├── firebase@11.2.0 deduped
│ └─┬ rxfire@6.1.0
│ └── firebase@10.14.1 deduped
└─┬ package-using-older-firebase@0.1.0
└─── firebase@10.14.1
アプリで CJS と ESM の require ステートメントと import ステートメントを混在させると、エラーが発生することもあります。これにより、Firebase JavaScript SDK の複数のインスタンスが作成され、それぞれが異なるため、Firebase JavaScript SDK の相互運用性が損なわれます。このシナリオをデバッグするには、使用するバンドラーの詳細度を増やします。たとえば、この目的のために esbuild analyze フラグを使用できます。
サービス ワーカーがバンドルされていることを確認する
サービス ワーカーは、多くの場合、他のウェブアプリとは別のパイプラインからビルドされ、Webpack などのバンドラーのデフォルト構成には含まれません。
サービス ワーカー内で Firebase JavaScript SDK のモジュラー バージョンを使用する場合は、サービス ワーカーのソースファイルを含めるようにアプリ バンドラーを構成してください。次の例では、npx を使用して、プロジェクトの src ディレクトリに firebase-sw.js サービス ワーカーをバンドルします。
npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js
バンドルされていない Service Worker の有効化は、Service Worker をサポートしていない ES モジュールのインポート元や、Service Worker のスコープに存在しないファイルをソースとしている場合、失敗します。このような障害は、無音でデバッグが難しい場合があります。
モジュラー バージョンの Firebase JavaScript SDK をアプリにバンドルする方法については、Firebase でのモジュール バンドラーの使用をご覧ください。
または、CDN から compat
Firebase JavaScript SDK バンドルをインポートして、バンドルを不要にすることもできます。
// Give the service worker access to Firebase Messaging.
// Replace 10.13.2 with the version of the Firebase JS SDK you're using
// in your app.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');
// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
...
});
// Retrieve an instance of Firebase Messaging so that it can handle
// background messages.
const messaging = firebase.messaging();
サーバーサイド レンダリングを操作するときに FirebaseServerApp を使用する
Firebase JavaScript SDK は、もともとブラウザ環境での実行を目的としていました。サーバーサイド レンダリング（SSR）フレームワークの導入により、SDK の使用が新しいランタイム環境に移行しています。これらのランタイムは、ウェブブラウザが提供するツールと API のサブセットを提供します。
たとえば、一部の Firebase SDK では、IndexedDB（ブラウザ専用の API）によるデータ キャッシュが必要です。Firebase Auth では、ヘッドレス サーバー環境では不可能な、特定のログインフローでユーザー操作が必要になる場合があります。App Check は、App Check トークンを作成する前に、ブラウザのヒューリスティクスを使用してユーザーを検証します。
これらの新しい環境で SDK を使用する場合は、FirebaseServerApp を使用します。これは FirebaseApp の新しいバリアントであり、クライアントサイドから収集されたデータを使用して SSR Firebase インスタンスをプリロードする手段を提供します。
FirebaseServerApp は次の 2 つのパラメータをサポートしています。
- 認証 ID トークン: 指定した場合、Firebase Auth は以前に認証されたユーザーを自動的にログインさせます。CSR と SSR の境界を越えてセッションをまたぐ可能性があります。
- App Check トークン: 指定した場合、App Check クライアント（ブラウザ環境以外ではサポートされていません）のインスタンスを初期化することなく、他の Firebase SDK でトークンが使用されます。これにより、App Check が有効になっているプロダクト（Cloud Functions、Data Connect、Cloud Firestore、Realtime Database、Vertex AI など）に対する SSR サポートがブロックされなくなります。
Next.js での FirebaseServerApp の使用例については、FirebaseServerApp を使用して SSR アプリ開発を効率化するをご覧ください。