Na tej stronie znajdziesz wskazówki i rozwiązania problemów z JavaScriptem, które mogą wystąpić podczas korzystania z pakietu SDK Firebase JavaScript.
Masz inne problemy lub nie widzisz swojego? Więcej informacji o Firebase i poszczególnych usługach znajdziesz w głównych najczęstszych pytaniach dotyczących Firebase.
Możesz też sprawdzić Firebase JavaScriptrepozytorium GitHub pakietu SDK, aby uzyskać aktualną listę zgłoszonych problemów i rozwiązań, a także zgłaszać własne problemy.
Konstrukcje Admin SDK dla Node.js nie są zgodne z pakietem SDK Firebase JavaScript.
Firebase Admin SDK dla Node.js i Firebase JavaScript SDK to odrębne implementacje, które nie mają wspólnych definicji interfejsów, klas ani funkcji. Instancje obiektów Admin SDK są niezgodne z funkcjami pakietu Firebase JavaScript SDK.
Na przykład instancja Admin SDK's FirebaseApp przekazana do funkcji Firebase JavaScript pakietu SDK getDatabase powoduje wystąpienie tego błędu:
TypeError: Cannot read properties of undefined (reading 'getProvider')
at _getProvider
at getDatabase
Dotyczy to całej powierzchni interfejsu API pakietu SDK Firebase JavaScript, a nie tylko Realtime Database.
Dotyczy to też używania w przeciwnym kierunku. Próba użycia typu Cloud Firestorepakietu JS SDKTimestamp z pakietem Firebase Admin SDK dla Node.jsTimestamp powoduje podobne błędy.
Unikaj używania sprzecznych wersji pakietu SDK Firebase JavaScript
Wiele sprzecznych wersji pakietu SDK Firebase JavaScript skonfigurowanych jako zależności w projekcie spowoduje błędy w czasie działania, gdy instancje pakietu SDK będą przekazywane między pakietami SDK. Na przykład użycie biblioteki Data Connect z niepasującą wersją FirebaseApp powoduje wystąpienie tego błędu:
Error: Component data-connect has not been registered yet
Ten problem jest zwykle spowodowany aktualizacją zależności jednego z pakietów Firebase SDK, ale nie wszystkich. Sytuacja ta często występuje, gdy automatyczne narzędzie do aktualizacji zależności zmienia podzbiór zależności pakietu SDK Firebase w pliku yarn.lock lub package-lock.json projektu. Wiele pakietów SDK Firebase JavaScript współpracuje ze sobą, dlatego używanie różnych wersji pakietów SDK powoduje niezgodności w czasie działania.
Aby rozwiązać ten problem, usuń katalog node_modules/ i plik yarn.lock (w przypadku yarn) lub package-lock.json (w przypadku npm) w projekcie i ponownie zainstaluj zależności.
Jeśli błędy nadal występują, rozwiąż problem za pomocą polecenia npm ls. Spowoduje to zarejestrowanie zależności projektu, dzięki czemu będziesz mieć możliwość zidentyfikowania sprzecznych wersji modułu firebase.
Na przykład ten log pokazuje package-using-older-firebase importowanie sprzecznej wersji pakietu SDK Firebase JavaScript:
$ 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
Błędy mogą też występować z powodu mieszania w aplikacji instrukcji CJS i ESM require i import. Powoduje to tworzenie wielu instancji pakietu SDK Firebase JavaScript, z których każda jest odrębna od pozostałych, co zakłóca interoperacyjność pakietu SDK Firebase JavaScript.
Aby debugować ten scenariusz, zwiększ poziom szczegółowości wybranego narzędzia do łączenia. Możesz na przykład użyć do tego flagi esbuild analyze.
Sprawdź, czy skrypty service worker są spakowane
Skrypty service worker są często tworzone w osobnym potoku niż reszta aplikacji internetowej i nie są uwzględniane w domyślnej konfiguracji narzędzi do łączenia plików, takich jak Webpack.
Jeśli w usłudze Service Worker używasz modułowej wersji pakietu SDK Firebase JavaScript, skonfiguruj narzędzie do tworzenia pakietów aplikacji tak, aby uwzględniało plik źródłowy usługi Service Worker. W przykładzie poniżej użyto npx do powiązania pliku service worker firebase-sw.js w katalogu src projektu:
npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js
Aktywacja skryptu service worker, który nie jest spakowany, nie powiedzie się, jeśli importuje moduły ES, które nie obsługują skryptów service worker, lub pliki, które nie istnieją w zakresie skryptu service worker. Czasami te błędy są niewidoczne i trudne do wykrycia.
Więcej informacji o pakowaniu modułowej wersji pakietu SDK Firebase JavaScript w aplikacji znajdziesz w artykule Używanie narzędzi do pakowania modułów z Firebase.
Możesz też wyeliminować konieczność tworzenia pakietów, importując pakiety SDK compat
Firebase JavaScript z sieci CDN:
// 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();
Używaj FirebaseServerApp podczas pracy z renderowaniem po stronie serwera
Firebase JavaScript SDK został pierwotnie zaprojektowany do działania w środowiskach przeglądarki. Wprowadzenie platform renderowania po stronie serwera (SSR) powoduje, że pakiety SDK są używane w nowych środowiskach wykonawczych. Te środowiska wykonawcze udostępniają podzbiór narzędzi i interfejsów API, które są dostępne w przeglądarkach internetowych.
Na przykład niektóre pakiety Firebase SDK wymagają buforowania danych za pomocą interfejsu IndexedDB API, który jest dostępny tylko w przeglądarce. Firebase Auth może wymagać interakcji użytkownika w przypadku niektórych procesów logowania, co jest niemożliwe w środowiskach serwerowych bez interfejsu. App Check polega na heurystyce przeglądarki, aby zweryfikować użytkownika przed utworzeniem tokenów App Check.
Podczas pracy z pakietem SDK w tych nowych środowiskach używaj FirebaseServerApp, czyli nowego wariantu FirebaseApp, który umożliwia wstępne wczytywanie instancji Firebase SSR z danymi zebranymi po stronie klienta.
FirebaseServerApp obsługuje 2 parametry:
- Token identyfikatora uwierzytelniania: jeśli jest podany, usługa Uwierzytelnianie Firebase automatycznie loguje wcześniej uwierzytelnionego użytkownika, potencjalnie obejmując sesję w zakresie podziału CSR/SSR.
- Token Sprawdzania aplikacji: jeśli jest dostępny, token jest używany przez inne pakiety SDK Firebase bez konieczności inicjowania instancji klienta App Check (które nie jest obsługiwane poza środowiskami przeglądarki). Umożliwia to obsługę SSR w przypadku usług, w których jest włączona funkcja App Check, takich jak Cloud Functions, Data Connect, Cloud Firestore, Realtime Database i Vertex AI.
Więcej informacji o użyciu funkcji FirebaseServerApp w Next.js znajdziesz w artykule Usprawnianie tworzenia aplikacji SSR za pomocą FirebaseServerApp.