Questa pagina offre suggerimenti e risoluzione dei problemi relativi a JavaScript che potresti riscontrare quando utilizzi l'SDK Firebase JavaScript.
Hai altre sfide o non vedi il tuo problema? Assicurati di consultare le domande frequenti principali di Firebase per altre domande frequenti su Firebase o specifiche per prodotto.
Puoi anche consultare il repository GitHub dell'SDK Firebase JavaScript per un elenco aggiornato dei problemi segnalati e della risoluzione dei problemi e segnalare i tuoi problemi.
I costrutti Admin SDK per Node.js non sono compatibili con l'SDK Firebase JavaScript
L'Firebase Admin SDK per Node.js e l'SDK Firebase JavaScript sono implementazioni distinte che non condividono definizioni di interfacce, classi o funzioni. Le istanze degli oggetti Admin SDK non sono compatibili con le funzioni dell'SDK Firebase JavaScript.
Ad esempio, un'istanza di Admin SDK's FirebaseApp
passata alla funzione Firebase JavaScript SDK getDatabase
produce il seguente errore:
TypeError: Cannot read properties of undefined (reading 'getProvider')
at _getProvider
at getDatabase
Ciò vale per l'intera superficie dell'API SDK Firebase JavaScript, non solo per Realtime Database.
Questo vale anche per l'utilizzo nella direzione opposta. Il tentativo di utilizzare il tipo Timestamp
dell'SDK JS Cloud Firestore con Firebase Admin SDK per Node.js produce errori simili.
Evita di utilizzare versioni in conflitto dell'SDK Firebase JavaScript
Più versioni in conflitto dell'SDK Firebase JavaScript configurate come dipendenze
in un progetto causeranno errori di runtime quando le istanze dell'SDK vengono passate tra i pacchetti
SDK. Ad esempio, l'utilizzo della libreria Data Connect con una versione non corrispondente di FirebaseApp
causa il seguente errore:
Error: Component data-connect has not been registered yet
Questo problema è comunemente causato da un aggiornamento delle dipendenze di uno, ma non di tutti, i pacchetti dell'SDK Firebase. Questa situazione si verifica spesso quando uno strumento di aggiornamento automatico delle dipendenze modifica un sottoinsieme delle dipendenze dell'SDK Firebase all'interno del file yarn.lock
o package-lock.json
del progetto. Poiché molti SDK Firebase JavaScript
interoperano tra loro, l'utilizzo di varie versioni degli SDK causa
incompatibilità di runtime,
Per risolvere il problema, elimina la directory node_modules
/ e il file yarn.lock
(per
yarn
) o package-lock.json
(per npm
) nel progetto e reinstalla le
dipendenze.
Se gli errori persistono, esegui il debug del problema con il comando npm ls. In questo modo verranno registrate le dipendenze del tuo progetto, così potrai identificare le versioni in conflitto del modulo firebase
.
Ad esempio, il seguente log mostra package-using-older-firebase
che importa una
versione in conflitto dell'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
Gli errori possono verificarsi anche a causa della combinazione di istruzioni CJS ed ESM require
e import
nella tua app. In questo modo vengono create più istanze dell'SDK Firebase JavaScript,
ognuna distinta dall'altra, il che interrompe l'interoperabilità dell'SDK Firebase JavaScript.
Aumenta il livello di dettaglio del bundler che preferisci per eseguire il debug di questo scenario. Ad esempio, puoi utilizzare il flag esbuild analyze a questo scopo.
Assicurati che i service worker siano raggruppati
I service worker vengono spesso creati da una pipeline separata dal resto di un'app web e non sono inclusi nella configurazione predefinita dei bundler come Webpack.
Se utilizzi la versione modulare dell'SDK Firebase JavaScript all'interno del service worker, assicurati di configurare il bundler dell'app in modo che includa il file di origine del service worker. Il seguente esempio utilizza npx
per raggruppare il
service worker firebase-sw.js
nella directory src
del progetto:
npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js
L'attivazione di un service worker non raggruppato non andrà a buon fine se importa moduli ES che non supportano i service worker o file che non esistono nell'ambito del service worker. A volte questi errori sono silenziosi e difficili da debuggare.
Per saperne di più sul bundling della versione modulare dell'SDK Firebase JavaScript nella tua app, consulta la sezione Utilizzo dei bundler di moduli con Firebase.
In alternativa, puoi eliminare la necessità di raggruppamento importando i bundle SDK compat
Firebase JavaScript dalla 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();
Utilizza FirebaseServerApp
quando lavori con il rendering lato server
L'SDK Firebase JavaScript era originariamente destinato all'esecuzione in ambienti browser. L'introduzione dei framework di rendering lato server (SSR) spinge l'utilizzo dell'SDK in nuovi ambienti di runtime. Questi runtime forniscono un sottoinsieme di strumenti e API forniti dai browser web.
Ad esempio, alcuni SDK Firebase richiedono la memorizzazione nella cache dei dati con IndexedDB, un'API solo per browser. Firebase Auth potrebbe richiedere l'interazione dell'utente in determinati flussi di accesso impossibili negli ambienti server headless. App Check si basa sull'euristica del browser per convalidare l'utente prima di creare i token App Check.
Quando utilizzi l'SDK in questi nuovi ambienti, usa
FirebaseServerApp
, una nuova variante
di FirebaseApp
che fornisce i mezzi per precaricare l'istanza SSR Firebase
con i dati raccolti dal lato client.
FirebaseServerApp
supporta due parametri:
- Token ID autenticazione: se fornito, Firebase Auth accede automaticamente a un utente autenticato in precedenza, potenzialmente in una sessione che si estende oltre la divisione CSR/SSR.
- Token App Check: se fornito, il token viene utilizzato dagli altri SDK Firebase senza la necessità di inizializzare un'istanza di un client App Check (che non è supportato al di fuori degli ambienti browser). In questo modo viene sbloccato il supporto SSR per i prodotti che hanno attivato App Check, come Cloud Functions, Data Connect, Cloud Firestore, Realtime Database e Vertex AI.
Consulta Semplificare lo sviluppo di app SSR con
FirebaseServerApp
per un esempio di utilizzo di FirebaseServerApp
in Next.js.