.env firebase API key returns undifined

[ritualjoint]

Hi guys! Ive spent the past few days trying out different solutions but still cant make it to work both locally and deployed facing the same issue. Some reason I can`t access the env variables in firebase-config. meh

.env (in root folder / )

REACT_APP_API_KEY = asdheyhohellothankyou1
REACT_APP_AUTH_DOMAIN = asdheyhohellothankyou2
REACT_APP_PROJECT_ID = asdheyhohellothankyou3
... so on

firebase-config.js

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

const firebaseConfig = {
  apiKey:  process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN ,
  projectId: process.env.REACT_APP_PROJECT_ID ,
  ... so on
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
export default app;

All variables added on Netlify-side ( Build & deploy > Environment > Environment variables)
Tried uninstall .env and reinstalled the packadge
Also tried like this too:${process.env.REACT_APP_API_KEY}
Run build again and restart

Im certain is not an issue on Netlifys side (as locally the issue still exists), its just my incompetence, but someone could enlighten me what Im doing wrong.

Thank you!

[perry]

hi there, did you see this guide already?

[Support Guide] Using environment variables on Netlify correctly

Last reviewed: August 2023 The preferred way to use environment variables in Netlify is to set them in our environment - be that in the Environment Variables settings UI (on the site’s “Build & Deploy settings” page), or via netlify.toml. You’ll want to choose the right pattern to meet your needs. Setting variables in our UI may be considered a bit more secure, since only people with access to the Netlify admin UI for your site can see them, rather than “anyone who can clone your repo!”. Thes…

[ritualjoint]

Thank you for your reply. I think i have read every posts available both here and other sites. Some of them exceeding my level of understanding though. All env set on the Netlify end. If i should speculate something is wrong initializing the App.

[hrishikesh]

That setup looks correct to me, I wonder why it would fail. Any chance you can share a minimal reproduction?

Also, does adding variables like this: Adding Custom Environment Variables | Create React App, work?

[ritualjoint]

Hi there! Thank you for your response.
I went ahead and tried a lot different ideas, including loading env with npm start. It was working fine there I went to codeplay and tried to replicate the problem. After a lot of try i figured it out. You must delete and recreate the .env file, completely! Maybe since i was progressing with my app i have copied the env file to one place to an other. Im pretty certain this caused the issue, probably some sort of a security/version control thing. Its a guess tho. Deleting the file, copy pasting the same info in the newly created .env file fixed it. It took a lot of effort, but what a simple solution it was.