Cannot read properties of undefined (reading 'VITE_FIREBASE_API_KEY')

Hi all,

I've been struggling with this issue for a while now, and I can't seem to get my head around it. My project (which uses Remix, Firebase and Chakra) is in fully working order, both in development mode and build mode. But when I deploy it to Vercel, I get the page error 'This Serverless Function has crashed', and in the console, I get the TypeError: Cannot read properties of undefined (reading 'VITE_FIREBASE_API_KEY').

I think this may be an error with using import.meta.env, but if I try do any other alternative, such as process.env, the web app goes blank in dev/build mode, and I get a reference error: process is not defined. If I try hard-coding the API keys, then I don't get any Vercel console errors, but obviously I don't want the API keys displayed in the public codebase.

My firebase.ts file is setup accordingly:

// firebase/firebase.ts

import { initializeApp, getApps, getApp } from "firebase/app";
import { getFirestore, collection } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
    appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

// Check if a Firebase app has already been initialized
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const db = getFirestore(app);
const auth = getAuth(app);

export { app, db, auth };

And it's referenced in each hook like this. These hooks are then referenced throughout the application.

 // Fetch budgets data
    useEffect(() => {
        const fetchBudgets = async () => {
            if (user) {
                try {
                    const budgetsRef = collection(db, `users/${user.uid}/budgets`);
                    const querySnapshot = await getDocs(budgetsRef);

                    const budgetsData: Budget[] = [];
                    querySnapshot.forEach((doc) => {
                        budgetsData.push({ id: doc.id, ...doc.data() } as Budget);
                    });

                    setBudgets(budgetsData);
                    console.log("Budgets data fetched:", budgetsData);
                } catch {
                    setError("Error fetching budgets data");
                } finally {
                    setLoading(false);
                }
            }
        };

        fetchBudgets();
    }, [user]);

Additionally, I have plugged the VITE environment variables into the Vercel settings, so it should work fine on that end. Here is a link to the GitHub repo, though I'm unsure how to include the environment variables so it can be reproduced: https://github.com/alfiemitchell123/personal-finance-app.

GitHub

GitHub - alfiemitchell123/personal-finance-app: Frontend Mentor - Personal Finance App Challenge

Frontend Mentor - Personal Finance App Challenge. Contribute to alfiemitchell123/personal-finance-app development by creating an account on GitHub.

Many thanks in advance!

Alfie

Hi,

I have noticed you have recently moved to process.env method. Are you still facing issue?

My bad! I thought I had deleted that Git commit, as I had accidentally shared the API keys (its only a practice project, so doesn’t matter too much).

I’ve gone back to import.meta.env because I was facing the issue that process was undefined in the browser. But that still doesn’t fix the Vercel deploy.