Firebase JavaScript SDK टूल इस्तेमाल करने के सबसे सही तरीके

इस पेज पर, JavaScript से जुड़ी उन समस्याओं को हल करने के लिए सुझाव और समस्या हल करने के तरीके दिए गए हैं जो Firebase JavaScript SDK का इस्तेमाल करते समय आ सकती हैं.

क्या आपको कोई और समस्या आ रही है या आपको अपनी समस्या नहीं दिख रही है? Firebase से जुड़े ज़्यादातर सवालों के जवाब या प्रॉडक्ट से जुड़े खास सवालों के जवाब पाने के लिए, Firebase के अक्सर पूछे जाने वाले सवालों का मुख्य पेज देखें.

शिकायत की गई समस्याओं और उन्हें हल करने के तरीकों की अप-टू-डेट सूची देखने के लिए, Firebase JavaScript SDK GitHub repo की जांच की जा सकती है. साथ ही, वहां अपनी समस्याएं भी सबमिट की जा सकती हैं.

Node.js के लिए Admin SDK कंस्ट्रक्ट, Firebase JavaScript SDK के साथ काम नहीं करते

Node.js के लिए Firebase Admin SDK और Firebase JavaScript SDK, अलग-अलग तरीके से लागू किए जाते हैं. इनमें इंटरफ़ेस, क्लास या फ़ंक्शन की परिभाषाएं एक जैसी नहीं होतीं. Admin SDK ऑब्जेक्ट के इंस्टेंस, Firebase JavaScript SDK फ़ंक्शन के साथ काम नहीं करते.

उदाहरण के लिए, Firebase JavaScript SDK getDatabase फ़ंक्शन को Admin SDK's FirebaseApp इंस्टेंस पास करने पर, यह गड़बड़ी होती है:

TypeError: Cannot read properties of undefined (reading 'getProvider')
 at _getProvider
 at getDatabase

यह सिर्फ़ Realtime Database के लिए नहीं, बल्कि पूरे Firebase JavaScript SDK API के लिए सही है. यह उल्टी दिशा में इस्तेमाल करने पर भी सही है. Node.js के लिए Firebase Admin SDK के साथ, Cloud Firestore JS SDK के Timestamp टाइप का इस्तेमाल करने पर भी इसी तरह की गड़बड़ियां होती हैं.

Firebase JavaScript SDK के ऐसे वर्शन इस्तेमाल न करें जो एक-दूसरे के साथ काम नहीं करते

किसी प्रोजेक्ट में, Firebase JavaScript SDK के एक से ज़्यादा ऐसे वर्शन को डिपेंडेंसी के तौर पर कॉन्फ़िगर करने पर, रनटाइम में गड़बड़ियां होंगी जो एक-दूसरे के साथ काम नहीं करते. ऐसा तब होगा, जब SDK पैकेज के बीच SDK इंस्टेंस पास किए जाएंगे. उदाहरण के लिए, SQL Connect लाइब्रेरी को FirebaseApp के ऐसे वर्शन के साथ इस्तेमाल करने पर, जो उसके साथ काम नहीं करता, यह गड़बड़ी होती है:

Error: Component data-connect has not been registered yet

आम तौर पर, यह समस्या Firebase SDK पैकेज में से किसी एक की डिपेंडेंसी अपडेट करने की वजह से होती है. हालांकि, ऐसा तब होता है, जब बाकी पैकेज की डिपेंडेंसी अपडेट नहीं की जातीं. ऐसा अक्सर तब होता है, जब डिपेंडेंसी को अपने-आप अपडेट करने वाला कोई टूल, प्रोजेक्ट की yarn.lock या package-lock.json फ़ाइल में, Firebase SDK की डिपेंडेंसी के सबसेट को बदल देता है. कई Firebase JavaScript SDK एक-दूसरे के साथ काम करते हैं. इसलिए, SDK के अलग-अलग वर्शन इस्तेमाल करने पर, रनटाइम में गड़बड़ियां होती हैं.

इस समस्या को ठीक करने के लिए, अपने प्रोजेक्ट में node_modules/ डायरेक्ट्री और yarn.lock (yarn) या package-lock.json (npm) को मिटाएं. इसके बाद, अपनी डिपेंडेंसी फिर से इंस्टॉल करें.

अगर गड़बड़ियां बनी रहती हैं, तो npm ls कमांड की मदद से समस्या को और डीबग करें. इससे आपके प्रोजेक्ट की डिपेंडेंसी लॉग हो जाएंगी. इसके बाद, firebase मॉड्यूल के ऐसे वर्शन की पहचान की जा सकती है जो एक-दूसरे के साथ काम नहीं करते.

उदाहरण के लिए, यहां दिए गए लॉग में दिखाया गया है कि package-using-older-firebase ऐसे वर्शन को इंपोर्ट कर रहा है जो Firebase JavaScript SDK के साथ काम नहीं करता:

$ 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

आपके ऐप्लिकेशन में, CJS और ESM के require और import स्टेटमेंट को मिक्स करने की वजह से भी गड़बड़ियां हो सकती हैं. इससे Firebase JavaScript SDK के कई इंस्टेंस बनते हैं, ये सभी इंस्टेंस एक-दूसरे से अलग होते हैं. इस वजह से, Firebase JavaScript SDK की इंटरऑपरेबिलिटी टूट जाती है. इस समस्या को डीबग करने के लिए, अपने पसंदीदा बंडलर की वर्बोसिटी बढ़ाएं. उदाहरण के लिए, इसके लिए esbuild analyze फ़्लैग का इस्तेमाल किया जा सकता है.

पक्का करें कि सर्विस वर्कर बंडल किए गए हों

आम तौर पर, सर्विस वर्कर को वेब ऐप्लिकेशन के बाकी हिस्से से अलग पाइपलाइन से बनाया जाता है. साथ ही, इन्हें Webpack जैसे बंडलर के डिफ़ॉल्ट कॉन्फ़िगरेशन में शामिल नहीं किया जाता.

अगर अपने सर्विस वर्कर में, Firebase JavaScript SDK के मॉड्यूलर वर्शन का इस्तेमाल किया जाता है, तो पक्का करें कि आपने अपने ऐप्लिकेशन बंडलर को सर्विस वर्कर की सोर्स फ़ाइल शामिल करने के लिए कॉन्फ़िगर किया हो. यहां दिए गए उदाहरण में, प्रोजेक्ट की src डायरेक्ट्री में firebase-sw.js सर्विस वर्कर को बंडल करने के लिए, npx का इस्तेमाल किया गया है:

npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js

अगर किसी ऐसे सर्विस वर्कर को चालू किया जाता है जिसे बंडल नहीं किया गया है, तो वह चालू नहीं हो पाएगा. ऐसा तब होगा, जब वह ES मॉड्यूल इंपोर्ट करता है. इन मॉड्यूल में, सर्विस वर्कर के साथ काम करने की सुविधा नहीं होती या इनमें ऐसी फ़ाइलें होती हैं जो सर्विस वर्कर के स्कोप में मौजूद नहीं होतीं. कभी-कभी ये गड़बड़ियां, बिना किसी मैसेज के होती हैं और इन्हें डीबग करना मुश्किल होता है.

अपने ऐप्लिकेशन में, Firebase JavaScript SDK के मॉड्यूलर वर्शन को बंडल करने के बारे में ज़्यादा जानने के लिए, Firebase के साथ मॉड्यूल बंडलर का इस्तेमाल करना लेख पढ़ें.

इसके अलावा, CDN से compat Firebase JavaScript SDK बंडल इंपोर्ट करके, बंडल करने की ज़रूरत को खत्म किया जा सकता है:

// 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();

सर्वर साइड रेंडरिंग के साथ काम करते समय, FirebaseServerApp का इस्तेमाल करें

Firebase JavaScript SDK को मूल रूप से ब्राउज़र एनवायरमेंट में चलाने के लिए बनाया गया था. सर्वर-साइड रेंडरिंग (एसएसआर) फ़्रेमवर्क के आने से, SDK का इस्तेमाल नए रनटाइम एनवायरमेंट में किया जा सकता है. इन रनटाइम में, वेब ब्राउज़र में मिलने वाले टूल और एपीआई का सबसेट मिलता है.

उदाहरण के लिए, कुछ Firebase SDK टूल के लिए, IndexedDB के साथ डेटा कैश मेमोरी में सेव करना ज़रूरी है. यह सिर्फ़ ब्राउज़र में काम करने वाला एपीआई है. Firebase Auth को साइन-इन के कुछ फ़्लो में, उपयोगकर्ता के इंटरैक्शन की ज़रूरत पड़ सकती है. हेडलेस सर्वर एनवायरमेंट में ऐसा करना मुमकिन नहीं है. App Check टोकन बनाने से पहले, App Check, उपयोगकर्ता की पुष्टि करने के लिए ब्राउज़र के ह्यूरिस्टिक्स पर निर्भर करता है.

इन नए एनवायरमेंट में SDK के साथ काम करते समय, FirebaseServerApp का इस्तेमाल करें. यह FirebaseApp का नया वर्शन है. इसकी मदद से, एसएसआर Firebase इंस्टेंस को क्लाइंट साइड से इकट्ठा किए गए डेटा के साथ प्रीलोड किया जा सकता है.

FirebaseServerApp दो पैरामीटर के साथ काम करता है:

• Auth आईडी टोकन: अगर यह टोकन दिया जाता है, तो Firebase Auth, पहले से पुष्टि किए गए उपयोगकर्ता को अपने-आप साइन इन कर लेता है. इससे, सीएसआर / एसएसआर के बीच किसी सेशन को बढ़ाया जा सकता है.
• App Check टोकन: अगर यह टोकन दिया जाता है, तो अन्य Firebase SDK टूल इसका इस्तेमाल करते हैं. इसके लिए, App Check क्लाइंट का इंस्टेंस शुरू करने की ज़रूरत नहीं होती. यह क्लाइंट, ब्राउज़र एनवायरमेंट के बाहर काम नहीं करता. इससे, App Check की सुविधा चालू है, जैसे Cloud Functions, SQL Connect, Cloud Firestore, Realtime Database, और Vertex AI जैसे उन प्रॉडक्ट के लिए एसएसआर की सुविधा चालू की जा सकती है जिनमें

Next.js में FirebaseServerApp के इस्तेमाल का उदाहरण देखने के लिए, FirebaseServerApp की मदद से एसएसआर ऐप्लिकेशन डेवलपमेंट को बेहतर बनाना लेख पढ़ें.