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 masalah, 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 SDK Firebase JavaScript.
Misalnya, instance FirebaseApp Admin SDK yang diteruskan ke fungsi getDatabase SDK JavaScript Firebase 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, menggunakan 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 sebagian dependensi Firebase SDK dalam
file yarn.lock atau package-lock.json project. Karena banyak SDK Firebase JavaScript
beroperasi satu sama lain, penggunaan berbagai versi SDK menyebabkan
inkompatibel 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 SDK Firebase JavaScript,
masing-masing berbeda dari yang lain, yang merusak interoperabilitas SDK Firebase JavaScript.
Tingkatkan panjang teks dari pilihan bundler Anda untuk men-debug skenario ini. Misalnya, Anda dapat menggunakan flag analisis esbuild untuk tujuan ini.
Pastikan pekerja layanan dipaketkan
Pekerja layanan sering kali dibuat dari pipeline terpisah dari seluruh aplikasi web, dan tidak disertakan dalam konfigurasi default bundler seperti Webpack.
Jika Anda menggunakan versi modular SDK Firebase JavaScript dalam pekerja
layanan, pastikan Anda mengonfigurasi app bundler untuk menyertakan file
sumber pekerja layanan. Contoh berikut menggunakan npx untuk memaketkan pekerja layanan 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 pekerja layanan yang tidak dipaketkan akan gagal jika sumbernya mengimpor modul ES yang tidak mendukung pekerja layanan atau file yang tidak ada dalam cakupan pekerja layanan. 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 SDK bundle compat
Firebase JavaScript 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 menggunakan 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 heuristika 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 memuat instance Firebase SSR secara offline 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.