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 problemu? Więcej informacji na temat Firebase i poszczególnych usług znajdziesz w głównych najczęstszych pytaniach dotyczących Firebase.
Aktualną listę zgłoszonych problemów i rozwiązań znajdziesz też w Firebase JavaScriptrepozytorium GitHub pakietu SDK. Możesz tam też zgłaszać własne problemy.
Konstrukcje Admin SDK dla Node.js nie są zgodne z pakietem SDK Firebase JavaScript.
Pakiet Firebase Admin SDK dla Node.js i pakiet 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 następujący błąd:
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 również używania w przeciwnym kierunku. Próba użycia typu Cloud Firestorepakietu JS SDKTimestamp z Firebase Admin SDKpakietem 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 zmieni 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 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 możesz zidentyfikować sprzeczne wersje modułu firebase.
Na przykład ten log pokazuje, że package-using-older-firebase importuje
konfliktującą wersję 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ąpić z powodu mieszania w aplikacji instrukcji CJS i ESM require i import. Powoduje to utworzenie wielu instancji pakietu SDK Firebase JavaScript, z których każda różni się 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ć w tym celu flagi esbuild analyze.
Sprawdź, czy skrypty service worker są spakowane
Skrypty service worker są często tworzone w ramach osobnego 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 niepowiązanego modułu service worker nie powiedzie się, jeśli importuje on moduły ES, które nie obsługują modułów service worker, lub pliki, które nie istnieją w zakresie modułu 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 SDK Firebase wymagają buforowania danych za pomocą interfejsu IndexedDB, 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 ramach podziału CSR/SSR.
- Token Sprawdzania aplikacji: jeśli jest podany, token jest używany przez inne pakiety SDK Firebase bez konieczności inicjowania instancji klienta App Check (co nie jest obsługiwane poza środowiskami przeglądarki). Umożliwia to obsługę SSR w przypadku usług, w których jest App Check włączona, takich jak Cloud Functions, Data Connect, Cloud Firestore, Realtime Database i Vertex AI.
Więcej informacji o używaniu funkcji FirebaseServerApp w Next.js znajdziesz w artykule Usprawnianie tworzenia aplikacji SSR za pomocą FirebaseServerApp.