Auf dieser Seite finden Sie Tipps und Informationen zur Fehlerbehebung bei JavaScript-Problemen, die bei der Verwendung des Firebase JavaScript SDK auftreten können.
Sie haben andere Probleme oder können das unten beschriebene Problem nicht sehen? Weitere Firebase- oder produktspezifische FAQs finden Sie in den allgemeinen Firebase-FAQs.
Im Firebase JavaScript SDK-GitHub-Repository finden Sie eine aktuelle Liste der gemeldeten Probleme und Informationen zur Fehlerbehebung. Dort können Sie auch eigene Probleme melden.
Admin SDK-Konstrukte für Node.js sind nicht mit dem Firebase JavaScript SDK kompatibel.
Das Firebase Admin SDK für Node.js und das Firebase JavaScript SDK sind separate Implementierungen, die keine Schnittstellen-, Klassen- oder Funktionsdefinitionen gemeinsam nutzen. Instanzen von Admin SDK-Objekten sind nicht mit Firebase-JavaScript-SDK-Funktionen kompatibel.
Wenn beispielsweise eine Instanz von Admin SDK mit dem FirebaseApp-Wert, der an die Firebase-Funktion des JavaScript-SDKs getDatabase übergeben wird, den folgenden Fehler erzeugt:
TypeError: Cannot read properties of undefined (reading 'getProvider')
at _getProvider
at getDatabase
Das gilt für die gesamte Firebase JavaScript SDK-API-Oberfläche, nicht nur für Realtime Database.
Das gilt auch für die Verwendung in die entgegengesetzte Richtung. Der Versuch, den Timestamp-Typ des Cloud Firestore JS SDK mit dem Firebase Admin SDK für Node.js zu verwenden, führt zu ähnlichen Fehlern.
Widersprüchliche Versionen des Firebase-SDK JavaScript vermeiden
Wenn in einem Projekt mehrere in Konflikt stehende Versionen des Firebase JavaScript SDK als Abhängigkeiten konfiguriert sind, treten Laufzeitfehler auf, wenn SDK-Instanzen zwischen SDK-Paketen übergeben werden. Wenn Sie beispielsweise die Data Connect-Bibliothek mit einer nicht übereinstimmenden Version von FirebaseApp verwenden, wird der folgende Fehler ausgegeben:
Error: Component data-connect has not been registered yet
Dieses Problem wird häufig durch ein Abhängigkeitsupdate von einem, aber nicht allen Firebase SDK-Paketen verursacht. Das passiert häufig, wenn ein Tool zum automatischen Aktualisieren von Abhängigkeiten eine Teilmenge der Firebase SDK-Abhängigkeiten in der Datei yarn.lock oder package-lock.json des Projekts ändert. Da viele Firebase-JavaScript-SDKs miteinander interagieren, führt die Verwendung verschiedener Versionen der SDKs zu Inkompatibilitäten zur Laufzeit.
Löschen Sie das Verzeichnis node_modules/ und die Datei yarn.lock (für yarn) oder package-lock.json (für npm) in Ihrem Projekt und installieren Sie die Abhängigkeiten neu, um dieses Problem zu beheben.
Wenn weiterhin Fehler auftreten, führen Sie mit dem npm ls-Befehl eine weitere Fehlerbehebung durch. Dadurch werden die Abhängigkeiten Ihres Projekts protokolliert, sodass Sie inkompatible Versionen des firebase-Moduls erkennen können.
Im folgenden Log wird beispielsweise gezeigt, dass package-using-older-firebase eine in Konflikt stehende Version des Firebase JavaScript SDK importiert:
$ 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
Fehler können auch auftreten, wenn Sie in Ihrer App die Anweisungen require und import von CJS und ESM mischen. Dadurch werden mehrere Instanzen des Firebase JavaScript SDK erstellt, die sich voneinander unterscheiden. Das führt dazu, dass die Interoperabilität des Firebase JavaScript SDK nicht mehr funktioniert.
Erhöhen Sie die Ausführlichkeit des Bundlers Ihrer Wahl, um dieses Szenario zu debuggen. Sie können dazu beispielsweise das esbuild analyze-Flag verwenden.
Service Worker müssen gebündelt sein
Service Worker werden oft in einer separaten Pipeline als der Rest einer Web-App erstellt und sind nicht in der Standardkonfiguration von Bundlern wie Webpack enthalten.
Wenn Sie die modulare Version des Firebase JavaScript SDK in Ihrem Service Worker verwenden, müssen Sie dafür sorgen, dass Ihr App-Bundler die Service Worker-Quelldatei enthält. Im folgenden Beispiel wird npx verwendet, um den firebase-sw.js-Service-Worker im Verzeichnis src des Projekts zu bündeln:
npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js
Die Aktivierung eines Service Workers, der nicht gebündelt ist, schlägt fehl, wenn er ES-Module importiert, die keine Service Workers unterstützen, oder Dateien, die nicht im Bereich des Service Workers vorhanden sind. Manchmal treten diese Fehler unbemerkt auf und sind schwer zu beheben.
Weitere Informationen zum Bündeln der modularen Version des Firebase JavaScript SDK in Ihre App finden Sie unter Modul-Bundler mit Firebase verwenden.
Alternativ können Sie das Bundling umgehen, indem Sie die compat-Firebase-JavaScript-SDK-Bundles aus dem CDN importieren:
// 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 bei serverseitigem Rendering verwenden
Das Firebase JavaScript SDK war ursprünglich für die Ausführung in Browserumgebungen vorgesehen. Durch die Einführung von Frameworks für serverseitiges Rendering (Server-Side Rendering, SSR) wird die SDK-Nutzung in neue Laufzeitumgebungen verlagert. Diese Laufzeiten bieten eine Teilmenge der Tools und APIs, die Webbrowser bereitstellen.
Für einige Firebase SDKs ist beispielsweise das Zwischenspeichern von Daten mit IndexedDB erforderlich, einer API, die nur im Browser verfügbar ist. Für bestimmte Anmeldevorgänge in Firebase Auth ist möglicherweise eine Nutzerinteraktion erforderlich, die in monitorlosen Serverumgebungen nicht möglich ist. App Check verwendet Browserheuristiken, um den Nutzer zu validieren, bevor App Check-Tokens erstellt werden.
Wenn Sie das SDK in diesen neuen Umgebungen verwenden, nutzen Sie FirebaseServerApp, eine neue Variante von FirebaseApp, mit der Sie die SSR-Firebase-Instanz mit Daten vorladen können, die auf Clientseite erhoben wurden.
FirebaseServerApp unterstützt zwei Parameter:
- Auth-ID-Token: Wenn angegeben, meldet Firebase Auth einen zuvor authentifizierten Nutzer automatisch an. Dies kann sich über eine Sitzung hinweg erstrecken, die CSR/SSR umfasst.
- App Check-Token: Wenn das Token angegeben wird, wird es von den anderen Firebase-SDKs verwendet, ohne dass eine Instanz eines App Check-Clients initialisiert werden muss. Das wird außerhalb von Browserumgebungen nicht unterstützt. Dadurch wird die SSR-Unterstützung für Produkte mit aktivierter App Check freigegeben, z. B. Cloud Functions, Data Connect, Cloud Firestore, Realtime Database und Vertex AI.
Unter Streamline SSR app development with FirebaseServerApp finden Sie ein Beispiel für die Verwendung von FirebaseServerApp in Next.js.