process.env is an empty object

I am trying to access env variables on development environment

I added dotenv to gatsby config, and created a .env.development file with

GATSBY_API_URL=https://dev.example.com/api

as stated https://www.gatsbyjs.org/docs/environment-variables/

When I console log process.env it is an empty object

Summary

Relevant information

Environment (if relevant)

Gatsby CLI version: 2.8.30 Gatsby version: 2.19.7 Node v13.7.0

System: OS: Windows 7 6.1.7601 CPU: (4) x64 AMD A6-3670 APU with Radeon™ HD Graphics Binaries: Node: 13.7.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.2.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD Languages: Python: 2.7.17 - /c/Python27/python npmPackages: gatsby: ^2.19.7 => 2.19.7 gatsby-image: ^2.2.39 => 2.2.39 gatsby-plugin-manifest: ^2.2.39 => 2.2.39 gatsby-plugin-offline: ^3.0.32 => 3.0.32 gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21 gatsby-plugin-sharp: ^2.4.3 => 2.4.3 gatsby-source-filesystem: ^2.1.46 => 2.1.46 gatsby-transformer-sharp: ^2.3.13 => 2.3.13

System: OS: Windows 7 6.1.7601 CPU: (4) x64 AMD A6-3670 APU with Radeon™ HD Graphics Binaries: Node: 13.7.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.2.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD Languages: Python: 2.7.17 - /c/Python27/python npmPackages: gatsby: ^2.19.7 => 2.19.7 gatsby-image: ^2.2.39 => 2.2.39 gatsby-plugin-manifest: ^2.2.39 => 2.2.39 gatsby-plugin-offline: ^3.0.32 => 3.0.32 gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21 gatsby-plugin-sharp: ^2.4.3 => 2.4.3 gatsby-source-filesystem: ^2.1.46 => 2.1.46 gatsby-transformer-sharp: ^2.3.13 => 2.3.13

File contents (if changed)

gatsby-config.js:

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
});
module.exports = {
  // ...
}

package.json: N/A gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

[DSchau]

Hi @algebrathefish!

This is intentional, so that variables aren’t accidentally linked/viewable and the “plucking” of them is deliberate.

In other words – if you log process.env.GATSBY_API_URL that will contain the value you want. Technically we do this by iterating through all the GATSBY_ environment variables, and use Webpack’s definePlugin to make these “strings” available.

So, long answer short – the solution is to grab the variable you want a la

const url = process.env.GATSBY_API_URL // this should be defined

Hope this helps! Thanks!

[rarest-adam]

In other words – if you log process.env.GATSBY_API_URL that will contain the value you want. Technically we do this by iterating through all the GATSBY_ environment variables, and use Webpack’s definePlugin to make these “strings” available.

It seems like something recently broke with this.

I used to do things like:

const { SOME_VAR } = process.env;

but that is now undefined. It seemed to have stopped working within the past couple of weeks, because I can see that it was working in August.

There might be a lot of sites out there that are silently breaking at the moment.

Yes, same for me! I had a wrapper function process.env[SOME_VAR] and it’s broken now