Auf dieser Seite finden Sie Tipps und Hinweise zur Fehlerbehebung bei JavaScript-Problemen, die bei der Verwendung des Firebase JavaScript SDK auftreten können.
Haben Sie andere Probleme oder finden Sie Ihr Problem nicht? In den häufig gestellten Fragen zu Firebase finden Sie weitere Informationen zu Firebase im Allgemeinen oder zu produktspezifischen Fragen.
Im GitHub-Repository des Firebase JavaScript SDK finden Sie außerdem eine aktuelle Liste der gemeldeten Probleme und Hinweise 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
Das Firebase Admin SDK for 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 Instenz von Admin SDK's FirebaseApp an die
Firebase JavaScript SDK getDatabase Funktion übergeben wird, tritt der folgende Fehler auf:
TypeError: Cannot read properties of undefined (reading 'getProvider')
at _getProvider
at getDatabase
Dies gilt für die gesamte Firebase JavaScript SDK API-Oberfläche, nicht nur für Realtime Database.
Es gilt auch für die Verwendung in umgekehrter Richtung. Wenn Sie versuchen, den
Cloud Firestore JS SDK-Typ Timestamp mit dem Firebase Admin SDK für Node.js
zu verwenden, treten ähnliche Fehler auf.
Widersprüchliche Versionen des Firebase JavaScript SDK vermeiden
Mehrere widersprüchliche Versionen des Firebase JavaScript SDK, die als Abhängigkeiten
in einem Projekt konfiguriert sind, verursachen Laufzeitfehler, wenn SDK-Instanzen zwischen SDK
Paketen übergeben werden. Wenn Sie beispielsweise die SQL Connect Bibliothek mit einer
nicht übereinstimmenden Version von FirebaseApp verwenden, tritt der folgende Fehler auf:
Error: Component data-connect has not been registered yet
Dieses Problem wird häufig durch eine Abhängigkeitsaktualisierung eines, aber nicht aller Firebase SDK-Pakete verursacht. Diese Situation tritt oft auf, wenn ein Tool zur automatischen Abhängigkeitsaktualisierung 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, verursacht die Verwendung verschiedener Versionen der SDKs
Inkompatibilitäten zur Laufzeit.
Löschen Sie zur Behebung dieses Problems 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.
Wenn weiterhin Fehler auftreten, beheben Sie das Problem mit dem npm ls
Befehl. Dadurch werden die Abhängigkeiten Ihres Projekts protokolliert, sodass Sie widersprüchliche Versionen des Moduls firebase erkennen können.
Im folgenden Log wird beispielsweise gezeigt, dass package-using-older-firebase eine
widersprüchliche 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 require und import
Anweisungen von CJS und ESM mischen. Dadurch werden mehrere Instanzen des Firebase JavaScript SDK erstellt,
die sich voneinander unterscheiden, was die Interoperabilität des Firebase JavaScript SDK beeinträchtigt.
Erhöhen Sie die Ausführlichkeit Ihres Bundlers, um dieses Szenario zu debuggen. Sie können dazu beispielsweise das Flag
`analyze` von `esbuild`
verwenden.
Service Worker müssen gebündelt sein
Service Worker werden oft über eine separate Pipeline aus dem 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 Service
worker verwenden, müssen Sie den App-Bundler so konfigurieren, dass die Quellcodedatei des Service
worker enthalten ist. Im folgenden Beispiel wird npx verwendet, um den Service Worker firebase-sw.js 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 Service Workers schlägt fehl, wenn er ES-Module importiert, die keine Service Worker unterstützen, oder Dateien, die nicht im Bereich des Service Workers vorhanden sind. Manchmal treten diese Fehler still auf und sind schwer zu debuggen.
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 Bündeln vermeiden, 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. Mit der Einführung von Frameworks für serverseitiges Rendering (Server-Side Rendering, SSR) wird das SDK in neuen Laufzeitumgebungen verwendet. Diese Laufzeiten bieten eine Teilmenge der Tools und APIs, die Webbrowser bereitstellen.
Einige Firebase SDKs erfordern beispielsweise das Daten-Caching mit IndexedDB, einer API, die nur im Browser verfügbar ist. Firebase Auth erfordert möglicherweise eine Nutzerinteraktion in bestimmten Anmeldeabläufen, die in Headless-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 vorab laden können, die auf der Clientseite erfasst wurden.
FirebaseServerApp unterstützt zwei Parameter:
- Auth-ID-Token: Wenn angegeben, meldet Firebase Auth automatisch einen zuvor authentifizierten Nutzer an. Dadurch kann eine Sitzung über die CSR /SSR-Grenze hinweg bestehen bleiben.
- 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 (was außerhalb von Browserumgebungen nicht unterstützt wird). Dadurch wird die SSR Unterstützung für Produkte mit aktivierter App Check Funktion wie Cloud Functions, SQL Connect, Cloud Firestore, Realtime Database, und Vertex AI ermöglicht.
Unter SSR-App-Entwicklung mit
FirebaseServerApp
optimieren finden Sie ein Beispiel für die Verwendung von FirebaseServerApp in Next.js.