Heroku Environment Variables Return Undefined

I tried to set some env. variables on Heroku and I did, I can see the variables in the app when opening the Heroku dashboard. But When I try to access the variables from my app it

Solution 1:

You're trying to access the environment variable on client side and this is not possible.

If you want to use environment variables on your client side application you need to set up Webpack to handle different environments.

In Webpack config files, you’ll define your global variables for each environment using Webpack’s Define plugin.

Also don't forget to add NODE_ENV config variable to your heroku app and set it to true. So you'll be sure that by accessingprocess.ENV.NODE_ENVwill force runtime to usenode.js` environment.

Now you can configure you're production environment as following:

/* in webpack.config-prod.js */
...,
plugins: [    
  new webpack.DefinePlugin({           
    NODE_ENV: JSON.stringify(process.env.NODE_ENV),      
    API_HOST: JSON.stringify(process.env.API_HOST)
  })
],
...

Now you can easily access you're environment variables in your client side app.

Solution 2:

If you check the Heroku build log, it recommends that you specify a nodejs version. If you specify a node version in your package.json, it might fix the problem.

package.json

{
...
  "engines": {
   "node": "12.13.1"
   },
...
}