Gatsby js undefined environment variables

[xAgustin93]

Good morning, I’m using gatsby.js and the environment variables I define in the netlify settings appear as undefined and don’t take them well.

Has the same thing happened to anyone else?

[Pie]

Hey @xAgustin93 and welcome to Community!

Starters for 10; have you seen this guide?

[Support Guide] Using environment variables on Netlify correctly

The preferred way to use environment variables in Netlify is to set them in our environment - be that in the Environment Variables settings UI (on the site’s “Build & Deploy settings” page), or via netlify.toml. The latter is a bit more flexible as you can set different values for different contexts - e.g. staging uses a staging $API_ENDPOINT and production uses a production one; the former is a bit more secure, since only people with access to the Netlify admin UI for your site can see them, ra…

[xAgustin93]

If I’ve tried what you say about adding the dotenv, but it still doesn’t work that way, that’s how I’ve got it condigurated.

require(“dotenv”).config({ path: “.env” });

const API_KEY_WEB = process.env.API_KEY_WEB;

[perry]

hi there,

for Gatsby, you need to use the prefix GATSBY_ for things to work properly. More in this thread:

How to access environment variables?

Hi I’m reasonably new to netlify and have never used the environment variables before but I’m having a tough time getting my head around how to use them. I have a gatsby site I’m working on and have set up a environment variable in the UI but I’m unsure how I access it? I have tried just console.log(process.env) to see what comes back but it’s an empty object. I know I’m missing something which may be obvious but I’m just a hobby developer so not sure. Additionally how do I access environment …