Bu sayfada, Firebase JavaScript SDK'sını kullanırken karşılaşabileceğiniz JavaScript sorunlarıyla ilgili ipuçları ve sorun giderme bilgileri yer almaktadır.
Başka zorluklarla mı karşılaşıyorsunuz veya sorununuzu görmüyor musunuz? Firebase'in geneliyle veya ürünlere özel SSS'ler için ana Firebase SSS bölümüne göz atmayı unutmayın.
Bildirilen sorunların ve sorun giderme işlemlerinin güncel listesi için Firebase JavaScript SDK GitHub deposunu da inceleyebilir ve kendi sorunlarınızı burada bildirebilirsiniz.
Node.js yapıları için Admin SDK, Firebase JavaScript SDK'sı ile 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 nesnelerinin örnekleri, Firebase JavaScript SDK işlevleriyle uyumlu değildir.
Örneğin, Admin SDK'nın FirebaseApp örneği, Firebase JavaScript SDK getDatabase işlevine iletildiğinde şu hatayı üretir:
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.
Ters yönde kullanım için de aynı durum geçerlidir. Node.js için Firebase Admin SDK ile Cloud Firestore JS SDK's türünü kullanmaya çalışmak benzer hatalara neden olur.Timestamp
Firebase JavaScript SDK'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 birden fazla çakışan sürümü, SDK örnekleri SDK paketleri arasında aktarılırken çalışma zamanı hatalarına neden olur. Örneğin, Data Connect kitaplığını FirebaseApp'nin eşleşmeyen bir sürümüyle kullanmak şu hataya neden olur:
Error: Component data-connect has not been registered yet
Bu sorun genellikle Firebase SDK paketlerinin birinin bağımlılık güncellemesinden kaynaklanır ancak tüm paketler etkilenmez. Bu durum genellikle otomatik bağımlılık güncelleme aracı, projenin yarn.lock veya package-lock.json dosyasındaki 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 farklı sürümlerinin kullanılması
çalışma zamanı uyumsuzluklarına 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) öğesini silip bağımlılıklarınızı yeniden yükleyin.
Hatalar devam ederse npm ls
komutu ile sorunu daha ayrıntılı bir şekilde ayıklayın. Bu işlem, projenizin bağımlılıklarını günlüğe kaydeder. Böylece firebase modülünün çakışan sürümlerini belirleyebilirsiniz.
Örneğin, aşağıdaki günlükte package-using-older-firebase, Firebase JavaScript SDK'sının çakışan bir sürümünü içe aktarıyor:
$ 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
Hatalar, uygulamanızda CJS ve ESM'nin require ve import ifadelerinin karıştırılmasından da kaynaklanabilir. Bu durum, Firebase JavaScript SDK'sının birden fazla örneğini oluşturur. Bu örneklerin her biri diğerinden farklıdır ve Firebase JavaScript SDK'sının birlikte çalışabilirliğini bozar.
Bu senaryonun hata ayıklamasını yapmak için seçtiğiniz paketleyicinin ayrıntı düzeyini artırın. Örneğin, bu amaçla esbuild analyze
flag'i kullanabilirsiniz.
Service worker'ların paketlendiğinden emin olun.
Hizmet çalışanları genellikle bir web uygulamasının geri kalanından ayrı bir işlem hattı kullanılarak oluşturulur ve Webpack gibi paketleyicilerin varsayılan yapılandırmasına dahil edilmez.
Hizmet çalışanı içinde 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, projenin src dizinindeki firebase-sw.js hizmet çalışanını 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ının etkinleştirilmesi, hizmet çalışanlarını desteklemeyen ES modüllerini veya hizmet çalışanının kapsamı içinde bulunmayan dosyaları içe aktarıyorsa başarısız olur. Bu hatalar bazen sessizce gerçekleşir ve hata ayıklaması zordur.
Firebase JavaScript SDK'nın modüler sürümünü uygulamanıza paketleme hakkında daha fazla bilgi için Firebase ile modül paketleyicileri kullanma başlıklı makaleyi inceleyin.
Alternatif olarak, CDN'den compat
Firebase JavaScript SDK paketlerini 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ı, başlangıçta tarayıcı ortamlarında çalışmak üzere tasarlanmıştır. Sunucu Tarafında Oluşturma (SSR) çerçevelerinin kullanıma sunulması, SDK kullanımını yeni çalışma zamanı ortamlarına taşıyor. Bu çalışma zamanları, web tarayıcılarının sağladığı araç ve API'lerin bir alt kümesini sunar.
Örneğin, bazı Firebase SDK'ları yalnızca tarayıcıda kullanılabilen bir API olan IndexedDB ile veri önbelleğe almayı gerektirir. Firebase Auth, belirli oturum açma akışlarında kullanıcının etkileşimini gerektirebilir. Bu etkileşim, başsız 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ı sezgisel yöntemlerine dayanır.
SDK'yı bu yeni ortamlarda kullanırken FirebaseServerApp'yı kullanın. Bu, FirebaseApp'ın yeni bir varyantıdır ve SSR Firebase örneğini istemci tarafında toplanan verilerle önceden yükleme olanağı sağlar.
FirebaseServerApp iki parametreyi destekler:
- Kimlik doğrulama kimliği jetonu: Sağlanırsa Firebase Auth, daha önce kimliği doğrulanmış bir kullanıcının oturumunu otomatik olarak açar. Bu, oturumun CSR/SSR ayrımını aşmasına neden olabilir.
- Uygulama Kontrolü jetonu: Sağlanırsa jeton, App Check istemcisinin bir örneğini başlatmaya gerek kalmadan diğer Firebase SDK'ları tarafından kullanılır (tarayıcı ortamları dışında desteklenmez). Bu, App Check etkinleştirilmiş ürünlerde (ör. Cloud Functions, Data Connect, Cloud Firestore, Realtime Database ve Vertex AI) SSR desteğinin önündeki engeli kaldırır.
Next.js'te FirebaseServerApp kullanım örneği için Streamline SSR app development with
FirebaseServerApp başlıklı makaleyi inceleyin.