process env file not working for firebase config file?

24 views Asked by At

So I have my firebase.config.js file and I want to hide the API_KEY and the other variables using env for some reason I keep getting the error that the process is not defined within the config file. I cannot seem to figure out why this is the case I have followed the REACT_APP part as well for the env files but it seems to be that process is the issue, the env file is defined in the root of my project the same level as the package json files. I put dummy values in for the env file to hide the info also. I have attached an image of my file structure for the .env file

Exact error message I get when I start my app:

firebase.config.js:11 Uncaught ReferenceError: process is not defined at firebase.config.js:11:11

File Structure image:

file structure

env file:

REACT_APP_FIREBASE_API_KEY="tester"
REACT_APP_FIREBASE_AUTH_DOMAIN="test"
REACT_APP_FIREBASE_PROJECT_ID="tester"
REACT_APP_FIREBASE_STORAGE_BUCKET="test"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID="123"
REACT_APP_FIREBASE_APP_ID="123test"
REACT_APP_FIREBASE_MEASUREMENT_ID="tester"

firebase.config.js, this file is within the src folder and another level down config folder

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// import firebase from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
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,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
0

There are 0 answers