Why are my custom environment variables undefined in my React app after deployment?

[Litis-Trion250]

Body

I have a Create React App (CRA) project that I'm deploying to a service like Netlify or Vercel. I've set up my environment variables in the deployment service's settings panel (e.g., REACT_APP_API_KEY=xyz123) and I'm trying to access them in my React code like this:JavaScript

const apiKey = process.env.REACT_APP_API_KEY;
console.log(apiKey); 

Outputs: undefined

When I run the app locally using npm start, the variable is correctly loaded from my local .env file. However, after deploying, the console.log consistently shows undefined.

Goal: I need to understand why this is happening and what the correct, secure way is to expose custom environment variables to my client-side React application when building and deploying it on a platform like Netlify or Vercel.Is there a specific prefix I'm missing, or do I need to configure something in the build process?

Guidelines

• I have read and understood this category's guidelines before making this post.

[Rocky-Dewan]

When deploying React apps, this is a well-known and frequent problem! In order to avoid unintentionally exposing sensitive server-side variables, the issue is with the way Create React App (CRA) manages environment variables during the build process. The explanation and solution are as follows:

1.The Reason: The Prefix REACT_APP_
Environment variables are only automatically included in the final client-side bundle by Create React App (and many other well-known React build tools, such as Vite and Next.js) if they are prefixed with REACT_APP_. In order to avoid being bundled into the public JavaScript files, any variable that does not have this prefix is handled as a server-side/private variable and is purposefully ignored during the build process. Because your variable is not prefixed, it is not included in the build process when you deploy, resulting in undefined at runtime.

2. The Fix: Rename and Rebuild

• A. Make Sure to Use the Prefix: The correct prefix, REACT_APP_API_KEY, is what you mentioned using. The solution would be to rename the variable to REACT_APP_API_KEY if you were using one like API_KEY.
• B. The Crucial Phase: Use the variable to rebuild Now The environment variable needs to be accessible when the build command (npm run build) is executed. It is correct to set the variable in the Netlify/Vercel dashboard of your hosting platform, but you need to make sure that the build process is restarted after setting it. CRA will appropriately embed the value into the static files after the hosting platform injects the variable into the shell environment where the npm run build command runs.
• C. Security Note: Keep in mind that anyone who examines the source code of your deployed application (for example, by looking at the network tab or the source files) will be able to see any variable that is prefixed with REACT_APP_. For truly secret keys (such as server-side API keys or database passwords), NEVER use this technique. Use it only for keys that are intended to be client-facing or public, such as a public Google Maps API key.

Summary of the Fix

1. Confirm that your variable has the correct name (REACT_APP_API_KEY, for example).

2. Set: The variable is configured in the environment settings of your deployment service.

3. Trigger: Restart your deployment service's build.