Environment Variables in gatsby-config.js not working

[pgegenfurtner]

Description

I want to use environment variables in my frontend code and in my gatsby-config.js. I followed the steps from https://www.gatsbyjs.org/docs/environment-variables/ and for the frontend code it works perfectly with my two files: .env.development and .env.production.

Environment

Gatsby version: 1.9.183
Node.js version: 8.9.4
Operating System: macOS 10.13.3

File contents (if changed):

gatsby-config.js:

require('dotenv').config();
module.exports = {
  plugins: [
    {...}
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: process.env.GA_KEY,
        anonymize: true,
      },
    },
  ],
};

package.json: not changed
gatsby-node.js: not changed
gatsby-browser.js: not changed
gatsby-ssr.js: not changed

Actual result

process.env.GA_KEY is undefiend

Expected behavior

process.env.GA_KEY is the value from my .env file

Am I doing something wrong here? I've read the documentation (gatsby and dotenv) multiple times and can't find the part which is wrong.

Thanks!

[KyleAMathews]

Hmm not sure actually :-(

[m-allanson]

@pgegenfurtner Do you have an example repo you could share?

[pgegenfurtner]

I looked a bit into it. The problem is, that dotenv looks for a file named .env. I can specify a different path / name with a config object. require('dotenv').config({path:'.env.development'});. This works, but it won't load the correct file depending on dev or prod.

So you could do this

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`
});

But buts works only in the prod environment (npm run build). NODE_ENV is not available to the development build (Todo @KyleAMathews ?).
You can go around it with setting the environment in develop command with NODE_ENV=development gatsby develop.

Now it works as I expect, but I see it only as a workaround (At least the modified develop command)

[m-allanson]

It sounds like a fix for this could be to modify gatsby develop so that it defaults to process.env.NODE_ENV === development?

I'm not sure what's best practise here.. Whether NODE_ENV=development gatsby develop is the correct approach or if Gatsby should try and be helpful by setting that for you (but allowing it to be overridden).

I'm happy to make a PR for this if @KyleAMathews approves 😀. It looks like a fairly straightforward change in gatsby-cli?

[KyleAMathews]

@m-allanson ah yeah — we should do that 😄 we do force set NODE_ENV to production during builds so we should do the same for development.

[KyleAMathews]

Well perhaps not force it during development. Just set it unless the user set something else. We have to have production during builds for a number of tools to work correctly.

[m-allanson]

@pgegenfurtner With the latest version of gatsby-cli (1.1.39), NODE_ENV should default to develop during gatsby develop.

[pgegenfurtner]

Nice.
I will make a PR with an updated version of the environment variables documentation, so that the implementation of dotenv is clear.

[pgegenfurtner]

Okay, I think this can be closed then

[Redmega]

Should note that dot-env-cli is great for adding dot-env to run before an npm command. This is how I use .env config files with gatsby develop or build on my local.

"build": "dot-env gatsby develop"

[JimLynchCodes]

I had to change the filename from .env to .env.development and prefix the variables with "GATSBY_"

[azmolmiah]

I just did the following...

require("dotenv").config({
  path: `.env`,
})