Firebase error while using firestore in NextJS

Question

I'm using firebase for my project, and I was able to successfully implement authentication in my app. Unfortanetly, when I try to use firestore in my project I have an error that tells me to initialize my app, but I already have a fie for this, and I use every firebase method from there.

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                                                              
                                                                                                               
     const clientCredentials = {                                                                               
       apiKey: process.env.NEXT_PUBLIC_FIREBASE_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,                                                         
    };                                                                                                        
                                                                                                              
    if (typeof window !== "undefined" && !firebase.apps.length) {                                             
      firebase.initializeApp(clientCredentials);                                                              
      if ("measurementId" in clientCredentials) firebase.analytics();                                         
    }                                                                                                         
                                                                                                              
                                                                                                            
   export default firebase;

Every time I want to use firebase, I just import firebase from this file and use it, for example

firebase.firestore()

Am I doing something wrong?

This should work. I do it the exact same way. The only difference if you block of logic to check that an app is not already initialized. — mmason33
– mmason33, Commented Oct 2, 2020 at 18:03
If the other solution do not work, please update us with the exact error verbatim, so that we can cross-reference possibilities. — Alexis
– Alexis, Commented Oct 5, 2020 at 22:07

mmason33 · Accepted Answer · 2020-10-02 18:04:46Z

1

I don't know if this will help you but this is exactly how I do it.

// init.js
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/storage';
import 'firebase/firestore';

const firebaseConfig = {
// configs
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Enable Firestore Cache
firebase.firestore()
    .enablePersistence()
    .catch((err) => {
        console.error(err);
    });

export default firebase;

// firestore.js
import firebase from './init';

/* FIRESTORE
*********************/
export const firestore = firebase.firestore();

answered Oct 2, 2020 at 18:04

mmason33

9881 gold badge6 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

gabriel_tiso Over a year ago

I will try this later and I'll give you a feedback, but for now, thank you for the answer! I hope it works!

mmason33 Over a year ago

I hope it helps. You're doing it right the only issue may be that block of logic in the initialization.

gabriel_tiso Over a year ago

I got an error Firestore has already been started and persistence can no longer be enabled. You can only call enablePersistence() before calling any other methods on a Firestore object.

mmason33 Over a year ago

So it sounds like if you're getting that error you're calling firestore before initializing the firebase app.

Collectives™ on Stack Overflow

Firebase error while using firestore in NextJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related