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.

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.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.