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