Sprawdzone metody dotyczące pakietu Firebase JavaScript SDK

Na tej stronie znajdziesz wskazówki i informacje o rozwiązywaniu problemów z JavaScriptem, które mogą wystąpić podczas korzystania z pakietu Firebase JavaScript SDK.

Masz inne problemy lub nie widzisz swojego problemu? Zapoznaj się z głównymi pytaniami i odpowiedziami dotyczącymi Firebase, aby uzyskać więcej informacji na temat Firebase lub konkretnych usług.

Możesz też sprawdzić repozytorium GitHub pakietu Firebase JavaScript SDK, aby uzyskać aktualną listę zgłoszonych problemów i rozwiązań, a także zgłaszać własne problemy.

TypeError: Cannot read properties of undefined (reading 'getProvider')
 at _getProvider
 at getDatabase

Error: Component data-connect has not been registered yet

Jeśli błędy nadal występują, rozwiąż problem za pomocą polecenia npm ls command. Spowoduje to zalogowanie zależności projektu, dzięki czemu będzie można zidentyfikować sprzeczne wersje modułu firebase.

Na przykład ten log pokazuje, że package-using-older-firebase importuje sprzeczną wersję pakietu Firebase JavaScript SDK:

$ 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 instrukcji require i import CJS i ESM w aplikacji. Powoduje to utworzenie wielu instancji pakietu Firebase JavaScript SDK, z których każda jest inna, co powoduje przerwanie współpracy pakietu Firebase JavaScript SDK. Aby rozwiązać ten problem, zwiększ poziom szczegółowości wybranego narzędzia do tworzenia pakietów. W tym celu możesz na przykład użyć flagi esbuild analyze flag.

Upewnij się, że usługa Service Worker jest spakowana

Usługi 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 tworzenia pakietów, takich jak Webpack.

Jeśli w usłudze Service Worker używasz modułowej wersji pakietu Firebase JavaScript SDK, skonfiguruj narzędzie do tworzenia pakietów aplikacji tak, aby zawierało plik źródłowy usługi Service Worker. Ten przykład pokazuje, jak za pomocą npx spakować skrypt 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 on 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ą ciche i trudne do debugowania.

Więcej informacji o pakowaniu modułowej wersji pakietu Firebase JavaScript SDK w aplikacji znajdziesz w artykule Używanie narzędzi do tworzenia pakietów modułów z Firebase.

Możesz też wyeliminować potrzebę pakowania, importując pakiety compat Firebase JavaScript SDK z 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();

Podczas pracy z renderowaniem po stronie serwera używaj FirebaseServerApp

Pakiet Firebase JavaScript SDK był pierwotnie przeznaczony do działania w środowiskach przeglądarki. Wprowadzenie platform do renderowania po stronie serwera (SSR) powoduje, że pakiet SDK jest używany w nowych środowiskach wykonawczych. Te środowiska wykonawcze udostępniają podzbiór narzędzi i interfejsów API, które udostępniają przeglądarki internetowe.

Na przykład niektóre pakiety Firebase SDK wymagają buforowania danych za pomocą IndexedDB, interfejsu API dostępnego tylko w przeglądarce. Usługa Firebase Auth może wymagać interakcji z użytkownikiem w niektórych procesach logowania, co jest niemożliwe w środowiskach serwera bez interfejsu graficznego. App Check opiera się 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, nowego wariantu FirebaseApp, który umożliwia wstępne wczytanie instancji SSR Firebase z danymi zebranymi po stronie klienta.

FirebaseServerApp obsługuje 2 parametry:

• Token identyfikatora uwierzytelniania: jeśli jest podany, usługa Firebase Auth automatycznie loguje wcześniej uwierzytelnionego użytkownika, potencjalnie obejmując sesję w podziale na CSR / SSR.
• Token sprawdzania aplikacji: jeśli jest podany, token jest używany przez inne pakiety Firebase SDK bez konieczności inicjowania instancji klienta App Check (która nie jest obsługiwana poza środowiskami przeglądarki). Odblokowuje to obsługę SSR w przypadku usług, w których włączono App Check, takich jak Cloud Functions, SQL Connect, Cloud Firestore, Realtime Database, i Vertex AI.

Przykłady użycia FirebaseServerApp w Next.js znajdziesz w artykule Usprawnianie tworzenia aplikacji SSR za pomocą FirebaseServerApp.