I am developing a frontend application using React and Vite. I have cloned a React/Bootstrap theme template (https://themes.getbootstrap.com/preview/?theme_id=19889) and am modifying it for my project. However, I have encountered an error when attempting to configure and initialize Firebase for authentication.

Here is the code I am trying to implement:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

console.log(process.env);

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);  // gives us an auth instance

export default auth;   // in order to use this auth instance elsewhere

However, when I try to run the project and open the console window in Google Chrome, I receive the following error:

Uncaught ReferenceError: process is not defined
    at firebase.js?t=1714400003156:4:13

I am unsure as to why this error is occurring, especially as I have ensured that the ‘process.env’ instances in my code correctly correspond to variables in my .env file. Any help on this issue would be immensely appreciated.

Tags: reactjs, firebase, vitejs, environment-variables