Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

227
Visualizações
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.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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]'
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda