CODEWITHSUNDEEP
reactjsherokuenvironment-variablescross-domaincreate-react-app
crevulus
crevulus

Reputation: 2418

Heroku config vars returning undefined in production

I have an app that works fine locally using a .env file. However, when I add my variable to Heroku as described in the heroku CRA buildpack correctly-entered config vars.

But when I run my application, I get an undefined value.

Calls failed because x-api-key undefined.

How can I ensure that value populates properly?

Here's an example call I'm making in my app:

const xApiKeyHeader = { "x-api-key": process.env.REACT_APP_X_API_KEY };

const filteredProfiles = await fetch(
  `${config.url}/profile/filteredProfiles`,
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      ...xApiKeyHeader,
    },
    body: JSON.stringify({
      ...this.props.filter,
      profession: this.state.professionValues,
    }),
  }
).then(...

Upvotes: 1

Views: 424

Answers (1)

crevulus
crevulus

Reputation: 2418

Answer:

Added this to my webpack config (suggested in this thread heroku environment variables return undefined):

new webpack.DefinePlugin(({           
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),      
    'process.env.REACT_APP_X_API_KEY': JSON.stringify(process.env.REACT_APP_X_API_KEY)
  })),

And set NODE_ENV to true in heroku config vars.

Upvotes: 1

Related Questions