Deploying site with Firebase Auth fails, saying "Cannot access 'auth' before initialization"

Question

I'm building a workout website using Next.JS and Firebase and everything works perfect on my local host. When I go to deploy it using firebase hosting, the build fails every time, saying "Error occurred prerendering page "". ReferenceError: Cannot access 'auth' before initialization" I'm not sure if this is an issue with my firebase setup or not. Here is my firebase file:

import { initializeApp } from "firebase/app";
import {
    signInWithPopup,
    GoogleAuthProvider,
    FacebookAuthProvider,
    signInWithEmailAndPassword,
    getAuth,
    signOut,
} from "firebase/auth";
import {
    getFirestore,
    getDocs,
    collection,
    deleteDoc,
    doc,
    setDoc,
} from "firebase/firestore";
import { toast } from "react-toastify";

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    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,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth(firebaseApp);
const db = getFirestore(firebaseApp);
const googleProvider = new GoogleAuthProvider();
const facebookProvider = new FacebookAuthProvider();

......
 a bunch of methods
......
export { auth };

Then in my _app.js file, I use the hook useAuthState to get a user out of the auth and pass that to the rest of app:

import React, { useState } from "react";
import { useLocalStorage } from "../components/useLocalStorage";
import { auth } from "../firebase";
import { useAuthState } from "react-firebase-hooks/auth";
import Layout from "../components/Layout";
import ExerciseContextProvider from "../context/state";


function MyApp({ Component, pageProps }) {
    const [myWorkout, setMyWorkout] = useLocalStorage("exercise", []);
    const [user] = useAuthState(auth);
    const [loading, setLoading] = useState(false);

    return (
        <>
            <ExerciseContextProvider>
                <Layout user={user}>
                    <Component
                        {...pageProps}
                        user={user}
                        loading={loading}
                        setLoading={setLoading}
                        myWorkout={myWorkout}
                        setMyWorkout={setMyWorkout}
                    />
                </Layout>
            </ExerciseContextProvider>

        </>
    );
}

export default MyApp;

Does anyone know why my builds would be failing?

I've tried a lot of different ways of importing auth from my firebase file, but it always says cannot access before initialization, which I think is weird because again, it works perfect on my local machine.

Answer 1

I had incorrectly assumed since Firebase had my API keys and was hosting it as well I wouldn't have to mess with those configurations I was wrong. Looking into it further, firebase wants you to use cloud functions which you cannot access without putting in a credit card. Instead of doing that I am hosting in Netlify and made sure to add the appropriate environment variables into that instead and now it will deploy.