Heroku not showing environment variables

[EliranGooner]

Summary

I followed the gastby docs for setting environment variables and it works fine in development but not in production.

Relevant information

I've created .env.development and .env.production and added two keys inside each one of them. Used them with process.env.KEY in my code and worked fine in development server. After deployment to Heroku, I ran heroku config:set KEY=***to set both of them up and still no dice.

Environment (if relevant)

System: OS: macOS 10.15.3 CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 13.10.1 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.3 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 80.0.3987.149 Safari: 13.0.5 npmPackages: gatsby: ^2.19.7 => 2.19.41 gatsby-background-image: ^0.10.2 => 0.10.2 gatsby-cli: ^2.10.9 => 2.11.1 gatsby-image: ^2.2.39 => 2.2.43 gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1 gatsby-plugin-manifest: ^2.2.39 => 2.2.47 gatsby-plugin-offline: ^3.0.32 => 3.0.40 gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3 gatsby-plugin-react-helmet: ^3.1.21 => 3.1.23 gatsby-plugin-sass: ^2.1.30 => 2.1.30 gatsby-plugin-sharp: ^2.4.3 => 2.4.12 gatsby-source-filesystem: ^2.1.46 => 2.1.54 gatsby-transformer-sharp: ^2.3.13 => 2.3.18 npmGlobalPackages: gatsby-cli: 2.10.9

[arthurjdam]

Have you tried re-deploying on Heroku after setting the environment variables?

[EliranGooner]

@arthurjdam Yes, I did. Also tried to put the keys in quotes in the .env files, and another time I tried interpolating the keys in the code. Everything logs undefined to the console.

[EliranGooner]

Apparently I misread the gatsby docs about env variables and I needed a plugin to make what I coded to work.