Halaman ini menawarkan tips dan pemecahan masalah untuk masalah JavaScript yang mungkin Anda alami saat menggunakan Firebase JavaScript SDK.
Ada kesulitan lain atau masalah yang Anda alami tidak dijelaskan di bawah ini? Pastikan Anda membaca FAQ Firebase utama untuk mengetahui lebih lanjut FAQ lintas Firebase atau khusus produk.
Anda juga dapat memeriksa repo GitHub Firebase JavaScript SDK untuk mengetahui daftar terbaru masalah yang dilaporkan dan pemecahan masalahnya, serta melaporkan masalah Anda sendiri di sana.
Admin SDK untuk konstruksi Node.js tidak kompatibel dengan Firebase JavaScript SDK
Firebase Admin SDK untuk Node.js dan Firebase JavaScript SDK adalah implementasi yang berbeda yang tidak memiliki definisi antarmuka, class, atau fungsi yang sama. Instance objek Admin SDK tidak kompatibel dengan fungsi Firebase JavaScript SDK.
Misalnya, instance FirebaseApp Admin SDK yang diteruskan ke fungsi getDatabase JavaScript Firebase SDK menghasilkan error berikut:
TypeError: Cannot read properties of undefined (reading 'getProvider')
at _getProvider
at getDatabase
Hal ini berlaku untuk seluruh platform Firebase JavaScript SDK API, bukan hanya Realtime Database.
Hal ini juga berlaku untuk penggunaan dalam arah yang berlawanan. Mencoba menggunakan jenis Timestamp Cloud Firestore JS SDK dengan Firebase Admin SDK untuk Node.js akan menghasilkan error yang serupa.
Hindari penggunaan versi Firebase JavaScript SDK yang bertentangan
Beberapa versi Firebase JavaScript SDK yang bertentangan yang dikonfigurasi sebagai dependensi dalam project akan menyebabkan error runtime saat instance SDK diteruskan di antara paket SDK. Misalnya, penggunaan library Data Connect dengan
versi FirebaseApp yang tidak cocok akan menyebabkan error berikut:
Error: Component data-connect has not been registered yet
Masalah ini biasanya disebabkan oleh update dependensi dari satu, tetapi tidak semua, paket Firebase SDK. Situasi ini sering terjadi saat alat update dependensi otomatis mengubah subset dependensi Firebase SDK dalam file yarn.lock atau package-lock.json project. Karena banyak Firebase JavaScript SDK
melakukan interoperabilitas satu sama lain, penggunaan berbagai versi SDK menyebabkan
inkompatibilitas runtime,
Untuk memperbaiki masalah ini, hapus direktori node_modules/ dan yarn.lock (untuk
yarn) atau package-lock.json (untuk npm) di project Anda dan instal ulang
dependensi Anda.
Jika error tetap ada, debug masalah lebih lanjut dengan perintah npm ls. Tindakan ini akan mencatat dependensi
project Anda sehingga Anda dapat mengidentifikasi versi modul
firebase yang bertentangan.
Misalnya, log berikut menunjukkan package-using-older-firebase mengimpor
versi Firebase JavaScript SDK yang bertentangan:
$ 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
Error juga dapat terjadi karena menggabungkan pernyataan require dan import CJS dan ESM
di aplikasi Anda. Hal ini akan membuat beberapa instance Firebase JavaScript SDK,
masing-masing berbeda dari yang lain, yang merusak interoperabilitas Firebase JavaScript SDK.
Tingkatkan panjang informasi dari pilihan bundler Anda untuk men-debug skenario ini. Misalnya, Anda dapat menggunakan flag analisis esbuild untuk tujuan ini.
Pastikan service worker dipaketkan
Service worker sering kali dibangun dari pipeline terpisah dari seluruh aplikasi web, dan tidak disertakan dalam konfigurasi default bundler seperti Webpack.
Jika Anda menggunakan versi modular Firebase JavaScript SDK dalam service worker, pastikan Anda mengonfigurasi pemaket aplikasi untuk menyertakan file sumber service worker. Contoh berikut menggunakan npx untuk memaketkan service worker firebase-sw.js di direktori src project:
npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js
Aktivasi service worker yang tidak dipaketkan akan gagal jika sumbernya mengimpor modul ES yang tidak mendukung service worker atau file yang tidak ada dalam cakupan service worker. Terkadang kegagalan ini tidak terlihat dan sulit di-debug.
Lihat Menggunakan pemaket modul dengan Firebase untuk mengetahui informasi lebih lanjut tentang cara memaketkan versi modular Firebase JavaScript SDK ke dalam aplikasi Anda.
Atau, Anda dapat menghilangkan kebutuhan untuk melakukan bundling dengan mengimpor bundle compat
Firebase JavaScript SDK dari 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();
Menggunakan FirebaseServerApp saat bekerja dengan Rendering Sisi Server
Firebase JavaScript SDK awalnya dimaksudkan untuk berjalan di lingkungan browser. Pengenalan framework Rendering Sisi Server (SSR) mendorong penggunaan SDK ke lingkungan runtime baru. Runtime ini menyediakan subset alat dan API yang disediakan browser web.
Misalnya, beberapa Firebase SDK memerlukan penyimpanan dalam cache data dengan IndexedDB, API khusus browser. Firebase Auth mungkin memerlukan interaksi pengguna dalam alur login tertentu yang tidak mungkin dilakukan di lingkungan server headless. App Check mengandalkan heuristik browser untuk memvalidasi pengguna sebelum membuat token App Check.
Saat menggunakan SDK di lingkungan baru ini, gunakan FirebaseServerApp, varian baru FirebaseApp yang menyediakan cara untuk melakukan pramuat instance Firebase SSR dengan data yang dikumpulkan dari sisi klien.
FirebaseServerApp mendukung dua parameter:
- Token ID Auth: jika disediakan, Firebase Auth akan otomatis memproses login pengguna yang sebelumnya diautentikasi, yang berpotensi mencakup sesi di seluruh pemisahan CSR/SSR.
- Token App Check: Jika disediakan, token akan digunakan oleh Firebase SDK lainnya tanpa perlu melakukan inisialisasi instance klien App Check (yang tidak didukung di luar lingkungan browser). Tindakan ini akan membuka blokir dukungan SSR untuk produk yang mengaktifkan App Check, seperti Cloud Functions, Data Connect, Cloud Firestore, Realtime Database, dan Vertex AI.
Lihat Menyederhanakan pengembangan aplikasi SSR dengan
FirebaseServerApp
untuk mengetahui contoh penggunaan FirebaseServerApp di Next.js.