I'm having trouble with environment variables in my Vercel project. I saved it as REACT_APP_FIREBASE_API_KEY in the settings, but when I try to use it, it shows as undefined every time, even after multiple redeployments. the variable can be used in all environments. Im not using next.js or another framework, because i dint change the framework preset in the settings and it is on other. hope someone can help me
Can you try echo $REACT_APP_FIREBASE_API_KEY & npm run build.... in your build command and let us know if you can see the value in build logs?
I'm facing the same issue, and it has worked with my previous deployment (26 days ago). My env variable is named FIREBASE_SERVICE_ACCOUNT_KEY and when adding echo $FIREBASE_SERVICE_ACCOUNT_KEY && in front of my build command, I can actually see its content in the build logs.
I tried deleting the environment variable and creating it again, but that didn't help. The variable is assigned to all environments. My current build command is pnpm turbo build --filter web, as I'm using turborepo and my Next.js app is located in apps/web, which I also configured as root directory in the project settings. I can reproduce this locally with the Vercel CLI by calling vercel build in my terminal. Adding the variable to my .env.local file fixes the issue locally. vercel dev works just fine, though, even without the .env.local "workaround".
Thanks for your help!
If you are using Turborepo, you will need to make sure the Environment variable also available in turbo.json to cache properly: https://turbo.build/repo/docs/crafting-your-repository/using-environment-variables
Thank you. I wasn't aware of the fact that there is now an Environment "Strict Mode" activated by default that results in having to add all the env vars in the turbo.json. This is how I fixed the build. Works fine now.
For everyone who doesn't want to do that, the "Loose Mode" can be activated by adding --env-mode=loose to your turbo run <task> command.