{"id":11971,"library":"rxfire","title":"RxFire","description":"RxFire is an open-source JavaScript library that provides RxJS observable bindings for various Firebase web client SDKs, including Firestore, Realtime Database, Cloud Storage, Authentication, and Functions. Currently at version 6.1.0, it targets Firebase JS SDK v9+ modular APIs and is compatible with RxJS v6 and v7. The library offers observable creators that simplify asynchronous data streams from Firebase, making it portable across frameworks and tree-shakeable. Key differentiators include the ability to easily combine multiple Firebase data sources using RxJS operators and simplify code-splitting of Firebase features, acting as a complementary tool rather than a full wrapper for the Firebase SDK. It is under active maintenance by the Firebase Extended team.","status":"active","version":"6.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/firebaseextended/rxfire","tags":["javascript","authentication","database","Firebase","firebase","realtime","storage","rxjs","notifications","typescript"],"install":[{"cmd":"npm install rxfire","lang":"bash","label":"npm"},{"cmd":"yarn add rxfire","lang":"bash","label":"yarn"},{"cmd":"pnpm add rxfire","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core Firebase JavaScript SDK, providing the underlying client functionality RxFire wraps.","package":"firebase","optional":false},{"reason":"The reactive programming library that RxFire builds upon for creating observables and using operators.","package":"rxjs","optional":false}],"imports":[{"note":"RxFire is an ESM-first library. Use specific subpath imports like `rxfire/firestore` to import functions for a particular Firebase service and enable tree-shaking. CommonJS `require` is not supported.","wrong":"const { collectionData } = require('rxfire/firestore');","symbol":"collectionData","correct":"import { collectionData } from 'rxfire/firestore';"},{"note":"Most RxFire functions are named exports, even if they are the primary function from a subpath. Avoid default import syntax.","wrong":"import getDownloadURL from 'rxfire/storage';","symbol":"getDownloadURL","correct":"import { getDownloadURL } from 'rxfire/storage';"},{"note":"RxFire is a complementary library. Core Firebase SDK functions like `initializeApp` are imported directly from the respective `firebase/*` subpath, not from `rxfire/*`.","wrong":"import { initializeApp } from 'rxfire/app';","symbol":"initializeApp","correct":"import { initializeApp } from 'firebase/app';"}],"quickstart":{"code":"import { initializeApp } from 'firebase/app';\nimport { getFirestore, collection, where, query } from 'firebase/firestore';\nimport { collectionData } from 'rxfire/firestore';\nimport { tap } from 'rxjs/operators';\n\n// Replace with your actual Firebase configuration from the Firebase console.\n// Using process.env for security in a real application.\nconst firebaseConfig = {\n  apiKey: process.env.FIREBASE_API_KEY ?? 'YOUR_API_KEY',\n  authDomain: process.env.FIREBASE_AUTH_DOMAIN ?? 'your-project-id.firebaseapp.com',\n  projectId: process.env.FIREBASE_PROJECT_ID ?? 'your-project-id',\n  storageBucket: process.env.FIREBASE_STORAGE_BUCKET ?? 'your-project-id.appspot.com',\n  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID ?? '1234567890',\n  appId: process.env.FIREBASE_APP_ID ?? '1:1234567890:web:abcdef1234567890'\n};\n\nconst app = initializeApp(firebaseConfig);\nconst firestore = getFirestore(app);\n\n// Create a query reference to a 'cities' collection, filtering by 'state' == 'CO'\nconst citiesRef = query(\n    collection(firestore, 'cities'),\n    where('state', '==', 'CO')\n);\n\nconsole.log('Subscribing to real-time city data from Firestore...');\n\n// Use collectionData from RxFire to get an observable of the query snapshot data\ncollectionData(citiesRef, { idField: 'id' })\n  .pipe(\n    tap(cities => console.log(`Received update with ${cities.length} cities.`))\n  )\n  .subscribe({\n    next: cities => {\n      // This callback will fire initially and then on every subsequent change\n      console.log('Current cities from Colorado:', cities);\n      // In a real application, you would update your UI here.\n    },\n    error: err => console.error('Error fetching cities:', err),\n    complete: () => console.log('Observable completed (unlikely for real-time data).')\n  });\n\n// To demonstrate unsubscribe, in a real app you might do this on component unmount\n// const subscription = collectionData(...).subscribe(...);\n// setTimeout(() => subscription.unsubscribe(), 30000);","lang":"typescript","description":"This quickstart demonstrates how to initialize Firebase, obtain a Firestore instance, create a collection query, and subscribe to real-time data changes using RxFire's `collectionData` function. It includes an example of logging data updates."},"warnings":[{"fix":"Update all Firebase SDK imports and calls to the modular style (e.g., `getFirestore(app)` instead of `firebase.firestore()`). Ensure your `rxjs` installation is compatible with `^6.0.0 || ^7.0.0` as specified in RxFire's peer dependencies. Review the RxFire v6 migration guide (if available) or the Firebase v9 upgrade guide.","message":"RxFire v6.0.0 introduced significant breaking changes by migrating its API to align with Firebase JS SDK v9+ modular syntax and updating its RxJS peer dependency to be compatible with RxJS v7. Direct references to `firebase.firestore()` or similar global patterns are no longer supported.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Ensure `firebase` and `rxjs` are explicitly installed in your project using `npm install firebase rxjs` or `yarn add firebase rxjs`. Check the `peerDependencies` field in RxFire's `package.json` for the exact version ranges required.","message":"RxFire has strict peer dependencies on `firebase` (`^9.0.0 || ^10.0.0 || ^11.0.0`) and `rxjs` (`^6.0.0 || ^7.0.0`). These must be installed separately and at compatible versions, as RxFire does not bundle them.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always use named imports from specific subpaths for both RxFire and Firebase. For example, `import { initializeApp } from 'firebase/app';` and `import { collectionData } from 'rxfire/firestore';`.","message":"RxFire leverages Firebase JS SDK v9+ modular imports. This means functions are imported from specific subpaths (e.g., `rxfire/firestore`) and core Firebase services must be imported from their respective `firebase/*` subpaths (e.g., `firebase/app`, `firebase/firestore`). Mixing old (e.g., `import firebase from 'firebase'`) and new import styles will lead to errors.","severity":"gotcha","affected_versions":">=6.0.0"},{"fix":"While widely used, developers should be aware of its 'Beta' status and monitor the official GitHub repository for announcements regarding potential API changes or breaking updates, especially during major Firebase SDK releases.","message":"The README states 'Status: Beta' despite the package being at version 6.x. While actively maintained, this 'Beta' status might imply that certain APIs could still evolve or that the library might not have reached a final, immutable state typical of a fully stable v1.0+ product in some ecosystems.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Always pass the correct Firebase service instance obtained from the modular SDK functions (e.g., `getFirestore(app)`, `getStorage(app)`, `getAuth(app)`) to the corresponding RxFire observable creators.","message":"RxFire functions expect specific Firebase service instances (e.g., `Firestore`, `Storage`, `Auth`) as arguments, not the general `FirebaseApp` instance. Passing the wrong type will result in runtime errors.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using ESM `import` syntax (`import { collectionData } from 'rxfire/firestore';`) and that your project's build setup (e.g., `package.json` `\"type\": \"module\"` or bundler configuration) correctly handles ESM.","cause":"This typically occurs when using CommonJS `require()` syntax with an ESM-only library, or when a bundler/Node.js environment is misconfigured for ESM.","error":"TypeError: (0 , rxfire_firestore__WEBPACK_IMPORTED_MODULE_2__.collectionData) is not a function"},{"fix":"Call `initializeApp()` from `firebase/app` once at the beginning of your application's lifecycle, providing your Firebase project configuration.","cause":"The Firebase application has not been initialized with `initializeApp()` before attempting to use any Firebase services or RxFire functions that depend on them.","error":"FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first."},{"fix":"Install the `firebase` package using `npm install firebase` or `yarn add firebase`. Verify that the installed `firebase` version (`npm view firebase version`) falls within the peer dependency range specified by RxFire (`^9.0.0 || ^10.0.0 || ^11.0.0`).","cause":"The `firebase` peer dependency is either missing from your project's `node_modules` or is installed at a version incompatible with RxFire.","error":"Error: Can't resolve 'firebase/app' in '...' OR Cannot find package 'firebase/app' imported from ..."},{"fix":"Ensure you pass the correct Firebase service instance. For example, pass `getFirestore(app)` to `collectionData`, `getStorage(app)` to `getDownloadURL`, and `getAuth(app)` to authentication-related RxFire functions.","cause":"An RxFire function like `collectionData()` (which expects a `Firestore` instance) was incorrectly passed the top-level `FirebaseApp` instance instead of the specific service instance.","error":"Argument of type 'FirebaseApp' is not assignable to parameter of type 'Firestore'."}],"ecosystem":"npm"}