Problem on adding ENV var in Netlify for react app

Question

I'm facing a problem on adding env var in netlifiy for react app.But it works perfect on localhost. Here is the code

let appId;

if (process.env.NODE_ENV !== "production") {
  appId = process.env.REACT_APP_SPEECH_ID;
} else {
  appId = process.env.SPEECH_ID;
}
export default appId;

The error I'm facing is

I'm adding the Netlify settings also

I can't figure out what's happening here. Please help me. Thanks in advance :)

you can set it several ways, on node command line scripts you can add NODE_ENV=production — Ben Gooding, May 09 '21 at 17:13
most react apps you'll have the dev complier, that will compile on changes like `npm run dev` and the prod way is to do it is `npm run build && npm run start` (but of course this is only an example of how your react might be setup) and that would set the node_env to production https://reactjs.org/docs/optimizing-performance.html — Ben Gooding, May 09 '21 at 17:15

score 0 · Answer 1 · answered May 11 '21 at 07:52

I believe Create React App requires your environment variables to be prefixed with REACT_APP_, similar to how you've done for localhost. I'd keep it the same for production:

const appId = process.env.REACT_APP_SPEECH_ID;

export default appId;

And then rename the variable in the Netlify admin as REACT_APP_SPEECH_ID.

Problem on adding ENV var in Netlify for react app

1 Answers1