Cannot connect to the emulators, (FirebaseError: Expected type 'Firestore$1', but it was: a custom Firestore object)

Version info

React: 17.0.2

Firebase: 9.5.0

ReactFire: 4.2.1

Other (e.g. Node, browser, operating system) (if applicable): Node16, Chrome, MacOS

Steps to reproduce

I’m using nextjs, in the pages/_app.tsx paste the following code

import { connectAuthEmulator, getAuth } from "@firebase/auth"
import { connectFirestoreEmulator, getFirestore } from "@firebase/firestore"
import { AppProps } from "next/app"
import { AuthProvider, FirebaseAppProvider, FirestoreProvider, useFirebaseApp } from "reactfire"
import "../styles/globals.css"

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <FirebaseAppProvider firebaseConfig={{ projectId: "shadyantra-a75f0", apiKey: "fake-key" }}>
      <FirebaseSDKProviders>
        <Component {...pageProps} />
      </FirebaseSDKProviders>
    </FirebaseAppProvider>
  )
}

function FirebaseSDKProviders({ children }) {
  const app = useFirebaseApp()
  const auth = getAuth(app)
  const firestore = getFirestore(app)

  if (true) {
    connectAuthEmulator(auth, "http://localhost:9099", { disableWarnings: true })
    connectFirestoreEmulator(firestore, "localhost", 8080)
  }

  return (
    <AuthProvider sdk={auth}>
      <FirestoreProvider sdk={firestore}>{children}</FirestoreProvider>
    </AuthProvider>
  )
}

Expected behavior

I should be able to connect to the emulator, without any error

Actual behavior

Right now it is giving me this error, “FirebaseError: Expected type ‘Firestore$1’, but it was: a custom Firestore object”

[usuarez]

make sure that u’re using firebase/firestore or firebase/firestore/lite in all your firebase imports, is u’ can’t get data from db using both libs, for example if you:

import { getFirestore } from “firebase/firestore”; the need the correct imports import { deleteDoc, doc, getDoc, getDocs, onSnapshot, updateDoc } from “firebase/firestore”; but if you import { deleteDoc, doc, getDoc, getDocs, onSnapshot, updateDoc } from “firebase/firestore/lite”; the error Expected type ‘xxxx’, but it was: a custom Firestore object appears in your app.

So, use only one lib, it works for me

[jhuleatt]

@usuarez’s comment https://github.com/FirebaseExtended/reactfire/issues/490#issuecomment-1066208615 about mixing firestore and firestore/lite is one possible cause.

Another is by accidentally importing two different versions of the firestore library. This is called the dual package hazard and happens when different dependencies use different versions of the same package due to bundler setup. ReactFire 4.2.2 has a new build process that should lower the chance of this happening.