CODEWITHSUNDEEP
javascriptreactjsfirebasegoogle-cloud-firestore
geekTechnique
geekTechnique

Reputation: 890

Firebase web v9 upgrade breaks react-firebase-hooks "useCollectionData()"

I'm trying to update some Firebase code in a React project to the new modular web v9 sdk that Firebase released recently. The project being upgraded uses the react-firebase-hooks hook useCollectionData(), which fails upon changing to the new sdk. I get the following error output in my console 3 times when I try to run my ported code.

index.esm.js:101 Uncaught TypeError: v1.isEqual is not a function

A minimal example of working web v8 code:

import firebase from 'firebase/app'
import 'firebase/firestore'
import { useCollectionData } from "react-firebase-hooks/firestore"


firebase.initializeApp({ //config here
})
const firestore = firebase.firestore();

function Foo() {
  const messagesRef = firestore.collection('messages')
  const query = messagesRef.orderBy('createdAt').limit(25)
  const [messages] = useCollectionData(query, { idField: 'id' })

  return (<> {messages} </>)
}

My attempt at porting to v9 that causes the error:

import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore"
import { useCollectionData } from "react-firebase-hooks/firestore"


const app = initializeApp({ //config here
})
const db = getFirestore(app)

function Foo() {
  const messagesRef = collection(db, "messages")
  const q = query(messagesRef, orderBy("createdAt"), limit(25))
  const [messages] = useCollectionData(q, { idField: "id" })
  
  return (<> {messages} </>)
}

I'm upgrading my dependencies from

"dependencies" : {
  "firebase": "^7.20.0",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-firebase-hooks": "^2.2.0",
}

to

"dependencies" : {
  "firebase": "^9.0.2",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-firebase-hooks": "^3.0.4",
}

This Firestore doc has examples I used to write my updated code. I also used this Firestore doc to better understand the changes to collection().

Thanks for your help.

Upvotes: 5

Views: 5371

Answers (1)

Dharmaraj
Dharmaraj

Reputation: 50850

Update 3 Nov 2021:

React Firebase Hooks v4 has been released which supports v9 and also requires React 16.8.0 or later and Firebase v9.0.0 or later.

The React Firebase Hooks library doesn't seem to support Firebase Modular SDK yet (last release April 2021). You might have to use compat version which allows to use older name-spaced syntax even in v9.0.0+ and does not have benefits of tree-shaking :

import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore'
// import 'firebase/compat/[SERVICE_NAME]'

Upvotes: 6

Related Questions