Question

0

137

Views

Next.js object console.log not showing correctly in browser

I'm building a simple Next.js web application that connects to a Firestore (Firebase). Everything seems to initialize correctly, but when the connection is finally initiated, the configuration seems to be changed. I have logged the Firestore object (console.log(firestore)) and noticed an unexpected difference between the terminal and the browser.

firebase.config.js

import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore"

const firebaseConfig = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID
};

const firebase = initializeApp(firebaseConfig);
const firestore = getFirestore(firebase);
export default firestore;

index.js

import { collection } from "firebase/firestore"
import { useCollection } from "react-firebase-hooks/firestore";
import firestore from '../firebase.config'

export default function Home() {
    console.log(firestore);
    const [accounts, accountsLoading, accountsError] =
        useCollection(collection(firestore, "accounts"),{}
        );

    return (
        <div className={styles.container}>
            <Head>
                <title>Create Next App</title>
                <meta name="description" content="Generated by create next app"/>
                <link rel="icon" href="/favicon.ico"/>
            </Head>

            <main className={styles.main}>
                {accountsError && <strong>Error: {JSON.stringify(accountsError)}</strong>}
                {accountsLoading && <span>Loading..</span>}
                {accounts && accounts.docs.map((account) => (
                    <div key={account.get('storage_account')}>
                        {JSON.stringify(account)}
                    </div>
                ))}
            </main>
        </div>
    )
}

Correct output (in terminal)

Firestore {
  ...
  _databaseId: DatabaseId {
    projectId: 'algofi-liquidation-dashb-44465',
    database: '(default)'
  },
  ...
}

Incorrect output (browser)

gc {
   type: "firestore",
   ...
   _databaseId: vt
      database: "(default)"
      projectId: undefined
      isDefaultDatabase: (...)
   ...
}

This results in a Firestore connection error: "The project undefined does not exist or it does not contain an active Cloud Datastore or Cloud Firestore database."

I don't know what the difference is between the object as logged into the terminal and the one in the browser.

about 4 years ago · Juan Pablo Isaza

Answer question

0

137

Next.js object console.log not showing correctly in browser

Find remote jobs

Andres GPT