Bu sayfada, Firebase JavaScript SDK'sını kullanırken karşılaşabileceğiniz JavaScript sorunlarıyla ilgili ipuçları ve sorun giderme adımları sunulmaktadır.
Başka zorluklarla karşılaşıyor musunuz veya sorununuzu burada görmüyor musunuz? Firebase genelindeki veya ürüne özel diğer SSS'ler için ana Firebase SSS sayfasını inceleyin.
Bildirilen sorunların ve sorun giderme adımlarının güncel listesini görmek için Firebase JavaScript SDK GitHub deposunu da kontrol edebilir ve kendi sorunlarınızı buradan bildirebilirsiniz.
Node.js için Admin SDK yapıları, Firebase JavaScript SDK'sıyla uyumlu değildir
Node.js için Firebase Admin SDK ve Firebase JavaScript SDK'sı, arayüz, sınıf veya işlev tanımlarını paylaşmayan farklı uygulamalardır. Admin SDK nesne örnekleri, Firebase JavaScript SDK işlevleriyle uyumlu değildir.
Örneğin, Firebase JavaScript SDK getDatabase işlevine iletilen Admin SDK'nin FirebaseApp örneği aşağıdaki hatayı oluşturur:
TypeError: Cannot read properties of undefined (reading 'getProvider')
at _getProvider
at getDatabase
Bu durum yalnızca Realtime Database için değil, Firebase JavaScript SDK API yüzeyinin tamamı için geçerlidir.
Bu durum, ters yönde kullanım için de geçerlidir. Cloud Firestore JS SDK'sının Timestamp türünü Node.js için Firebase Admin SDK ile kullanmaya çalışmak benzer hatalar oluşturur.
Firebase JavaScript SDK'sının çakışan sürümlerini kullanmaktan kaçının
Bir projede bağımlılık olarak yapılandırılan Firebase JavaScript SDK'sının birbiriyle çakışan birden fazla sürümü, SDK örnekleri SDK paketleri arasında aktarıldığında çalışma zamanında hatalara neden olur. Örneğin, Data Connect kitaplığının FirebaseApp ile eşleşmeyen bir sürümüyle kullanılması aşağıdaki hataya neden olur:
Error: Component data-connect has not been registered yet
Bu sorun genellikle Firebase SDK paketlerinin birinde (tümünde değil) bağımlılık güncellemesinden kaynaklanır. Bu durum genellikle otomatik bağımlılık güncelleme aracı, projenin yarn.lock veya package-lock.json dosyasında Firebase SDK bağımlılıklarının bir alt kümesini değiştirdiğinde ortaya çıkar. Birçok Firebase JavaScript SDK'sı birbiriyle birlikte çalıştığından, SDK'ların çeşitli sürümlerinin kullanılması çalışma zamanında uyumsuzluklara neden olur.
Bu sorunu düzeltmek için projenizdeki node_modules/ dizinini ve yarn.lock (yarn için) veya package-lock.json (npm için) klasörünü silin ve bağımlılıkları yeniden yükleyin.
Hatalar devam ederse npm ls komutuyla sorunda daha fazla hata ayıklama yapın. Bu işlem, firebase modülünün çakışan sürümlerini belirleyebilmeniz için projenizin bağımlılıkları günlüğe kaydeder.
Örneğin, aşağıdaki günlükte package-using-older-firebase'ün Firebase JavaScript SDK'sının çakışan bir sürümünü içe aktardığı gösterilmektedir:
$ 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
Uygulamanızda CJS ve ESM'nin require ve import ifadeleri karıştırıldığında da hatalar oluşabilir. Bu durum, her biri diğerinden farklı olan birden fazla Firebase JavaScript SDK örneği oluşturur ve Firebase JavaScript SDK'sının birlikte çalışabilirliğini bozar.
Bu senaryoda hata ayıklama yapmak için tercih ettiğiniz paketleyicinin ayrıntı düzeyini artırın. Örneğin, bu amaçla esbuild analyze işaretçisini kullanabilirsiniz.
Hizmet işçilerinin paketlendiğinden emin olun
Hizmet çalışanları genellikle web uygulamasının geri kalanından ayrı bir ardışık düzenden oluşturulur ve Webpack gibi paketleyicilerin varsayılan yapılandırmasına dahil edilmez.
Hizmet çalışanınızda Firebase JavaScript SDK'sının modüler sürümünü kullanıyorsanız uygulama paketleyicinizi, hizmet çalışanı kaynak dosyasını içerecek şekilde yapılandırdığınızdan emin olun. Aşağıdaki örnekte, firebase-sw.js hizmet işçisini projenin src dizininde paketlemek için npx kullanılmaktadır:
npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js
Paketlenmemiş bir hizmet çalışanı, hizmet çalışanlarını desteklemeyen ES modüllerini veya hizmet çalışanının kapsamında bulunmayan dosyaları içe aktarıyorsa etkinleştirilemez. Bazen bu hatalar sessizdir ve hata ayıklamanın zor olduğu durumlarla karşılaşılabilir.
Firebase JavaScript SDK'sının modüler sürümünü uygulamanıza dahil etme hakkında daha fazla bilgi için Firebase ile modül birleştiricileri kullanma başlıklı makaleyi inceleyin.
Alternatif olarak, compat
Firebase JavaScript SDK paketlerini CDN'den içe aktararak paketleme ihtiyacını ortadan kaldırabilirsiniz:
// 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();
Sunucu tarafı oluşturma ile çalışırken FirebaseServerApp kullanın
Firebase JavaScript SDK'sının asıl amacı tarayıcı ortamlarında çalışmasıydı. Sunucu Tarafında Oluşturma (SSR) çerçevelerinin kullanıma sunulması, SDK kullanımını yeni çalışma ortamına yönlendiriyor. Bu çalışma ortamları, web tarayıcılarında bulunan bir araç ve API alt kümesini sağlar.
Örneğin, bazı Firebase SDK'ları yalnızca tarayıcıda çalışan bir API olan IndexedDB ile veri önbelleğe alma işlemini gerektirir. Firebase Auth, belirli oturum açma akışlarında kullanıcı etkileşimi gerektirebilir. Bu etkileşim, headless sunucu ortamlarında mümkün değildir. App Check, App Check jetonları oluşturmadan önce kullanıcıyı doğrulamak için tarayıcı sezgilerini kullanır.
Bu yeni ortamlarda SDK ile çalışırken, SSR Firebase örneğini istemci tarafında toplanan verilerle önceden yükleme olanağı sağlayan FirebaseApp'ın yeni bir varyantı olan FirebaseServerApp'i kullanın.
FirebaseServerApp iki parametreyi destekler:
- Auth kimlik jetonu: Sağlanırsa Firebase Auth, daha önce kimliği doğrulanmış bir kullanıcının oturumunu otomatik olarak açar. Bu işlem, CSR/SSR sınırı boyunca bir oturum boyunca devam edebilir.
- Uygulama Kontrolü Jetonu: Sağlanırsa jeton, App Check istemcisi örneğini (tarayıcı ortamları dışında desteklenmez) başlatmak gerekmeden diğer Firebase SDK'ları tarafından kullanılır. Bu işlem, App Check'nin etkin olduğu ürünler (ör. Cloud Functions, Data Connect, Cloud Firestore, Realtime Database ve Vertex AI) için SSR desteğinin engellemesini kaldırır.
Next.js'de FirebaseServerApp kullanımıyla ilgili örnek için FirebaseServerApp ile SSR uygulama geliştirmeyi kolaylaştırma başlıklı makaleyi inceleyin.