FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore, migrating to v9 firebase

Question

I am struggling with migrating firebase v8 -> v9. I have a component library with Storybook for demoing components. This library is published as a package through NPM/Github packages.

The migration have not given me any trouble, except this. The problem occurs when importing and using the component below in my web app.

The code below works perfectly in Storybook, but fails when importing the component into my web app.

const useGetLanguages = (firestoreInstance: Firestore): Response => {
  const [loading, setLoading] = useState(false)
  const [data, setData] = useState<ILanguage[]>([])
  console.log('firestoreInstance: ', firestoreInstance) // Logs firestore instance
  
  const fetch = useCallback(() => {
    if (!firestoreInstance) return
    setLoading(true)
    
    const collectionRef = collection(firestoreInstance, 'data')
    console.log('blip') // this logs fine
    getDoc(doc(collectionRef, 'tags')) // crashes here...
      .then(res => {
        const data = res?.data()?.languages
        if (data) {
          const languages = (Object.values(data) as unknown) as ILanguage[]
          if (languages) {
            setData(languages.sort(sortBy('name')))
          }
        }
      })
      .finally(() => {
        setLoading(false)
      })
  }, [firestoreInstance])

I initially used:

getDoc(doc(firestoreInstance, 'data', 'tags'))

which also worked in Storybook, but when navigating to a page using this hook in my web app, I get this error:

Uncaught FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

I have read through similar questions, but it does not solve the issue. Any input would be much appreciated!

EDIT: I am importing firebase like this:

// firebaseConfig.ts

import { FirebaseOptions, initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'
import { getFunctions } from 'firebase/functions'

const config: FirebaseOptions = {
// ...config
}

export const app = initializeApp(firebaseConfig)
export const authInstance = getAuth(app)
export const firestoreInstance = getFirestore(app)
export const functionsInstance = getFunctions(app)

I then import firestoreInstance and pass it to the function/component that is imported from the package.

I will try to pass the config itself and consume that in the package and post result.

Answer 1

It turned out to be a slip up from our side. We needed to install firebase as a peerDependency in our package.json. Had similar issues when migrating to MUI 5. If anyone else is getting obscure errors that do not make sense in your situation it might be worth a shot to check where you have your dependencies!