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

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",
}

"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.

CodePudding user response：

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]'