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-spezifische oder allgemeine häufig gestellte Fragen finden Sie in den Firebase-FAQs.
Im GitHub-Repository des Firebase JavaScript SDK finden Sie eine aktuelle Liste der gemeldeten Probleme und Informationen zur Fehlerbehebung. Dort können Sie auch eigene Probleme melden.
Admin SDK für Node.js-Konstrukte sind nicht mit dem Firebase JavaScript SDK kompatibel
Firebase Admin SDK für Node.js und das Firebase JavaScript SDK sind unterschiedliche Implementierungen, die keine gemeinsamen Schnittstellen-, Klassen- oder Funktionsdefinitionen haben. Instanzen von Admin SDK-Objekten sind nicht mit Firebase JavaScript SDK-Funktionen kompatibel.
Wenn beispielsweise eine Instanz der FirebaseApp von Admin SDK an die Firebase JavaScript SDK-getDatabase-Funktion übergeben wird, wird der folgende Fehler ausgegeben:
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 umgekehrter Richtung. Wenn Sie versuchen, den Timestamp-Typ des Cloud Firestore JS SDK mit der Firebase Admin SDK für Node.js zu verwenden, treten ähnliche Fehler auf.
Vermeiden Sie die Verwendung von in Konflikt stehenden Versionen des Firebase JavaScript SDK
Mehrere konfliktierende Versionen des Firebase JavaScript SDK, die in einem Projekt als Abhängigkeiten konfiguriert sind, führen zu Laufzeitfehlern, 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 eines, aber nicht aller Firebase SDK-Pakete verursacht. Diese Situation tritt häufig auf, wenn ein automatisches Tool zum Aktualisieren von Abhängigkeiten einen Teil 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 Laufzeitinkompatibilitäten.
Löschen Sie das Verzeichnis node_modules/ und 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, können Sie das Problem mit dem Befehl npm ls weiter beheben. Dadurch werden die Abhängigkeiten Ihres Projekts protokolliert, damit Sie in Konflikt stehende Versionen des firebase-Moduls identifizieren können.
Im folgenden Log wird beispielsweise angezeigt, dass package-using-older-firebase eine inkompatible 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 durch das Mischen von require- und import-Anweisungen von CJS und ESM in Ihrer App auftreten. Dadurch werden mehrere Instanzen des Firebase JavaScript SDK erstellt, die sich voneinander unterscheiden. Dies beeinträchtigt die Interoperabilität des Firebase JavaScript SDK.
Erhöhen Sie die Ausführlichkeit Ihres bevorzugten Bundlers, um dieses Szenario zu debuggen. Sie können dazu beispielsweise die esbuild-Flag „analyze“ verwenden.
Dienst-Worker müssen gebundelt sein
Service Worker werden oft über eine separate Pipeline vom Rest einer Webanwendung erstellt und sind nicht in der Standardkonfiguration von Bundlern wie Webpack enthalten.
Wenn Sie die modulare Version des Firebase JavaScript SDK in Ihrem Dienstarbeiter verwenden, müssen Sie Ihren App-Bundler so konfigurieren, dass die Dienstarbeiter-Quelldatei eingeschlossen wird. Im folgenden Beispiel wird npx verwendet, um den firebase-sw.js-Dienstworker 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 nicht gebündelten Dienstarbeiters schlägt fehl, wenn er ES-Module importiert, die keine Dienstarbeiter unterstützen, oder Dateien, die nicht im Bereich des Dienstarbeiters liegen. Manchmal sind diese Fehler stumm und schwer zu beheben.
Weitere Informationen zum Binden der modularen Version des Firebase JavaScript SDK in Ihre App finden Sie unter Modul-Bundler mit Firebase verwenden.
Alternativ kannst du das Bündeln vermeiden, indem du die compat
Firebase JavaScript SDK-Bundles aus dem CDN importierst:
// 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 der Arbeit mit serverseitigem Rendering verwenden
Das Firebase JavaScript SDK wurde ursprünglich für die Ausführung in Browserumgebungen entwickelt. Durch die Einführung von Frameworks für serverseitiges Rendering (SSR) wird die SDK-Nutzung in neue Laufzeitumgebungen verlagert. Diese Laufzeiten bieten eine Teilmenge der Tools und APIs, die Webbrowser bereitstellen.
Einige Firebase SDKs erfordern beispielsweise das Daten-Caching mit IndexedDB, einer reinen Browser-API. Für Firebase Auth ist bei bestimmten Anmeldeabläufen möglicherweise eine Nutzerinteraktion erforderlich, die in headless-Serverumgebungen nicht möglich ist. App Check nutzt Browser-Heuristiken, um den Nutzer zu validieren, bevor App Check-Tokens erstellt werden.
Wenn Sie das SDK in diesen neuen Umgebungen verwenden, verwenden Sie FirebaseServerApp, eine neue Variante von FirebaseApp, mit der die SSR-Firebase-Instanz mit Daten aus der Clientseite vorab geladen werden kann.
FirebaseServerApp unterstützt zwei Parameter:
- Auth-ID-Token: Wenn dieses Token angegeben ist, meldet Firebase Auth einen zuvor authentifizierten Nutzer automatisch an. Die Sitzung kann sich dabei über die CSR-/SSR-Grenze erstrecken.
- App Check-Token: Wenn angegeben, wird das Token von den anderen Firebase SDKs verwendet, ohne dass eine Instanz eines App Check-Clients initialisiert werden muss (dies wird außerhalb von Browserumgebungen nicht unterstützt). Dadurch wird die SSR-Unterstützung für Produkte mit aktivierter App Check freigeschaltet, z. B. Cloud Functions, Data Connect, Cloud Firestore, Realtime Database und Vertex AI.
Eine Beispielanwendung von FirebaseServerApp in Next.js finden Sie unter SSR-App-Entwicklung mit FirebaseServerApp optimieren.