इस पेज पर, JavaScript से जुड़ी उन समस्याओं के बारे में सलाह और उन्हें हल करने का तरीका बताया गया है जो Firebase JavaScript SDK टूल का इस्तेमाल करते समय आपको आ सकती हैं.
क्या आपको कोई और समस्या आ रही है या आपको अपनी समस्या नहीं दिख रही है? Firebase के बारे में अक्सर पूछे जाने वाले सवालों के जवाब पाने के लिए, Firebase के बारे में अक्सर पूछे जाने वाले सवाल देखें.
Firebase JavaScript SDK टूल के GitHub रिपॉज़िटरी पर जाकर, सूचना दी गई समस्याओं और उन्हें हल करने के तरीकों की अप-टू-डेट सूची देखी जा सकती है. साथ ही, वहां अपनी समस्याएं भी दर्ज की जा सकती हैं.
Node.js के लिए Admin SDK, Firebase JavaScript SDK टूल के साथ काम नहीं करता
Node.js के लिए Firebase Admin SDK और Firebase JavaScript SDK, अलग-अलग तरीके से लागू किए गए हैं. इनमें इंटरफ़ेस, क्लास या फ़ंक्शन की परिभाषाएं शेयर नहीं की जाती हैं. Admin SDK ऑब्जेक्ट के इंस्टेंस, Firebase JavaScript SDK के फ़ंक्शन के साथ काम नहीं करते.
उदाहरण के लिए, Admin SDK के FirebaseApp का एक इंस्टेंस, Firebase JavaScript SDK getDatabase फ़ंक्शन को पास करने पर, यह गड़बड़ी दिखती है:
TypeError: Cannot read properties of undefined (reading 'getProvider')
at _getProvider
at getDatabase
यह सिर्फ़ Realtime Database के लिए नहीं, बल्कि पूरे Firebase JavaScript SDK टूल के एपीआई के लिए सही है.
यह बात, दूसरी दिशा में इस्तेमाल करने पर भी लागू होती है. Node.js के लिए Firebase Admin SDK के साथ Cloud Firestore JS SDK टूल के Timestamp टाइप का इस्तेमाल करने पर, मिलती-जुलती गड़बड़ियां होती हैं.
Firebase JavaScript SDK टूल के ऐसे वर्शन इस्तेमाल करने से बचें जो एक-दूसरे से मेल न खाते हों
अगर किसी प्रोजेक्ट में, Firebase JavaScript SDK टूल के एक से ज़्यादा वर्शन को डिपेंडेंसी के तौर पर कॉन्फ़िगर किया गया है, तो SDK टूल के इंस्टेंस को SDK टूल के पैकेज के बीच पास करने पर, रनटाइम की गड़बड़ियां होंगी. उदाहरण के लिए, FirebaseApp के मैच न करने वाले वर्शन के साथ Data Connect लाइब्रेरी का इस्तेमाल करने पर, यह गड़बड़ी दिखती है:
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
flag का इस्तेमाल किया जा सकता है.
पक्का करें कि सेवा वर्कर बंडल किए गए हों
सर्विस वर्कर को अक्सर वेब ऐप्लिकेशन के बाकी हिस्सों से अलग पाइपलाइन से बनाया जाता है. साथ ही, इन्हें 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 के साथ मॉड्यूल बंडलर का इस्तेमाल करना लेख पढ़ें.
इसके अलावा, सीडीएन से 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 की मदद से डेटा को कैश मेमोरी में सेव करना ज़रूरी होता है. यह सिर्फ़ ब्राउज़र के लिए उपलब्ध API है. Firebase Auth को कुछ साइन-इन फ़्लो में उपयोगकर्ता इंटरैक्शन की ज़रूरत पड़ सकती है. हेडलेस सर्वर एनवायरमेंट में ऐसा करना मुमकिन नहीं है. App Check टोकन बनाने से पहले, App Check उपयोगकर्ता की पुष्टि करने के लिए, ब्राउज़र के हेयुरिस्टिक्स पर निर्भर करता है.
इन नए एनवायरमेंट में SDK टूल के साथ काम करते समय, FirebaseApp के नए वैरिएंट FirebaseServerApp का इस्तेमाल करें. इससे, क्लाइंट साइड से इकट्ठा किए गए डेटा के साथ, एसएसआर Firebase इंस्टेंस को पहले से लोड करने का तरीका मिलता है.
FirebaseServerApp में दो पैरामीटर इस्तेमाल किए जा सकते हैं:
- Auth आईडी टोकन: अगर यह दिया गया है, तो Firebase Auth, पहले पुष्टि किए गए उपयोगकर्ता को अपने-आप साइन इन कर देता है. ऐसा हो सकता है कि यह सेशन, सीएसआर / एसएसआर के बीच में हो.
- ऐप्लिकेशन की जांच करने के लिए टोकन: अगर यह टोकन दिया जाता है, तो अन्य Firebase SDK टूल इसका इस्तेमाल करते हैं. इसके लिए, App Check क्लाइंट के किसी इंस्टेंस को शुरू करने की ज़रूरत नहीं होती. यह क्लाइंट, ब्राउज़र के बाहर काम नहीं करता. इससे उन प्रॉडक्ट के लिए एसएसआर की सुविधा चालू हो जाती है जिनमें App Check चालू है. जैसे, Cloud Functions, Data Connect, Cloud Firestore, Realtime Database, और Vertex AI.
Next.js में FirebaseServerApp के इस्तेमाल के उदाहरण के लिए, FirebaseServerApp की मदद से एसएसआर ऐप्लिकेशन डेवलपमेंट को आसान बनाएं देखें.