Netlify Environment Variable is undefined with React app deploy

Question

When I am in local host i have a.env.local file where I grab the api key from. When I deploy my app to netlify, the netlify env var does not work. I set the env var on the netlify dashboard so it should work. I even did this for another project and had no problems. This is my code where I set the api key:

let movieDbApiKey = "";

if (process.env.NODE_ENV !== "production") {
  movieDbApiKey = process.env.REACT_APP_MOVIEDB_API_KEY;
  console.log("not in production build");
} else {
  movieDbApiKey = process.env.MOVIEDB_API_KEY;
  console.log(process.env.MOVIEDB_API_KEY);
  console.log("in production build");
}

Locally, REACT_APP_MOVIEDB_API_KEY returns a value. When I deploy it, the var that I set in netlify dashboard returns undefined. I named it exactly how it is in the file. It also is in production build so im not sure what the problem is.

Answer 1

1. React variable should start with REACT_APP

2. Placed the variable in Site settings > Build & deploy > Environment > Environment variables.

3. Rebuild the react application.

I hope this will be solved the problem.