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

[maxmarchionda]

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 [email protected] (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

[maxmarchionda]

You seem to be on to something here. I can confirm on my end that adding

experimental: {
  esmExternals: false
}

does fix the issue. I have [email protected], [email protected], and [email protected] and just by adding that to the next.config.js the error does not show up anymore.

[jhuleatt]

Interesting, I wonder if this is related to some other bundling issues we're investigating, like #488 or #489

[jhuleatt]

Chatted with bundling guru @jamesdaniels about this. Conclusion:

The root cause is likely that Firestore is pulling its .proto files from disk, and the Nextjs bundler isn't including them. The error is cryptic because the bundler is probably stripping asserts that would give a more fine-grained error message.

There are a few solutions:

1. esmExternals: false will work as long as you manually include the @firebase/firestore package yourself on the server.
2. Manually copy over the Firestore protos (node_modules/@firebase/firestore/dist/src) into your dist/src after building.
3. Indicate in your bundler config to include .proto files. E.g. Webpack's setting for this is require('file-loader?...')

[maxmarchionda]

Thanks a bunch for digging into it. Does this sound like an issue worth raising to either the Firebase or Nextjs team?

[CubitSpeed]

Chatted with bundling guru @jamesdaniels about this. Conclusion:

The root cause is likely that Firestore is pulling its .proto files from disk, and the Nextjs bundler isn't including them. The error is cryptic because the bundler is probably stripping asserts that would give a more fine-grained error message.

There are a few solutions:

1. esmExternals: false will work as long as you manually include the @firebase/firestore package yourself on the server.
2. Manually copy over the Firestore protos (node_modules/@firebase/firestore/dist/src) into your dist/src after building.
3. Indicate in your bundler config to include .proto files. E.g. Webpack's setting for this is require('file-loader?...')

Option 1 doesn't seem to work for me. I tried setting the option experimental.esmExternals = false in next.config.js and adding a pnpm i @firebase/firestore to the build command. Did not work.

Option 3 also didn't work. I tried adding this to next.config.js:

  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(proto)$/i,
      type: 'asset/resource',
    });
    return config;
  },

Maybe Option 2 will work? But it sounds like a huge pain... happy if someone can tell me what I might be doing wrong

[CubitSpeed]

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

[jhuleatt]

Sounds like this has been resolved.