How to export firebase firestore for my next.js project

Question

I'm having trouble understanding how to export firebase's firestore to use on the clientside of my next.js app. I have the following way of instantiating the firebase from my app.

import firebase from 'firebase/app'
import 'firebase/auth' // If you need it
import 'firebase/firestore' // If you need it
import 'firebase/storage' // If you need it
import 'firebase/analytics' // If you need it

const clientCredentials = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
}

// Check that `window` is in scope for the analytics module!
if (typeof window !== 'undefined' && !firebase.apps.length) {
  firebase.initializeApp(clientCredentials)
  // To enable analytics. https://firebase.google.com/docs/analytics/get-started
  if ('measurementId' in clientCredentials) firebase.analytics()
}

export default firebase

My problem is that I thought I could instantiate firestore within the codeblock above and export it to use across my app by importing that instantiated object:

export const db = firebase.firestore();

But when I try to use that in other files I get this error:

{ FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

But I have instantiated inside the if (window ...) block. I'm not sure what I'm doing wrong, I can infer that the instantiation within the if block is taking place after export const db... is ran so how do I wait for that?

TIA

Answer 1

Try this.

import app from "firebase/app";
import "firebase/auth";


const config = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};


class Firebase {
    constructor() {
        app.initializeApp(config);
        this.auth = app.auth();
      
        this.fs = app.firestore(); // example of setting firestore equal to this.fs for later access
    }
}

export default Firebase;

The key parts are import app from "firebase/app"; and the contents of the constructor.

Try it, see if it works. My app uses some of the context API in React but yea that's how it starts. If not leave a comment with what error you get and I'll try to stop back to see how you're doing