NextJS compatibility issues with doc(useFirestore(), 'tryreactfire', 'burrito')

I was attempting to just follow the demo but there seems to be some odd behavior when using reactfire paired with any version of Firebase later than 9.1.3 and any version of NextJS v12. Specifically the line: const burritoRef = doc(useFirestore(), 'tryreactfire', 'burrito'); throws FirebaseError: [code=invalid-argument]: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

The issue goes away when I either

1. Use next@11
2. Use firebase@9.1.3 (or older)

I have a feeling like this is probably an issue with firebase/nextjs, not reactfire but I figured this could be a good place to start.

Version info

firebase: “9.5.0” next: “12.0.4” react: “17.0.2” reactfire: “4.2.1”

Test case

_app.jsx

import { getFirestore, doc } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';
import { AuthProvider, FirebaseAppProvider, FirestoreProvider, useFirebaseApp, useFirestore, useFirestoreDocData } from 'reactfire';

const firebaseConfig = {
  // config goes here
};

function TestFirestoreData() {
  const burritoRef = doc(useFirestore(), 'tryreactfire', 'burrito'); // this is where the error is thrown
  const { status, data } = useFirestoreDocData(burritoRef);
  console.log(data)
  return <div/>
}

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

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

function MyApp({ Component, pageProps }) {
  return (
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      <FirebaseSDKProviders>
        <Component {...pageProps} />
      </FirebaseSDKProviders>
    </FirebaseAppProvider>
  )
}

export default MyApp

Steps to reproduce

Replace sample _app.tsx with the above code in a sample app created from yarn create next-app

Expected behavior

Expected code to run without any errors

Actual behavior

Error thrown FirebaseError: [code=invalid-argument]: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

It seems to have some issue with the server side runtime, since I can comment out the TestFirestoreData component, reload the page, then uncomment the TestFirestoreData component (performing a hot reload but not actually reloading the page) and it will work, but when I reload the page I get the above error again.

[Gbuomprisco]

Can you try adding

experimental: {
  esmExternals: false
}

to your next.config.js?

I spent hours debugging this. I think the issue is in rxfire somehow picking up the CJS version which ends up with the SDK mismatching

[CubitSpeed]

Update: this fixed the issue for me: https://github.com/firebase/firebase-js-sdk/issues/5823