【Gatsby.js】.env.development内の変数がundefinedになるエラー

Contentfulに保存したデータにアクセスするためのスペースIDとアクセストークンを直接gatsby-config.jsに書くと、その内容がGithubで公開されてしまいます。

そこで、別で.envファイルを作成してその中に格納し、外部のjsファイルからアクセスしようとしたところ、undefinedになるエラーが発生しました。

.env.developmentにスペースIDとアクセストークンを記述
npmでdotenvモジュールをインストール
gatsby-config.jsから参照できない
stackoverflowで同様の事例を発見

.env.developmentにスペースIDとアクセストークンを記述

GATSBY_GRAPHQL_IDE=playground
CONTENTFUL_SPACE_ID=スペースID
CONTENTFUL_ACCESS_TOKEN=アクセストークン

npmでdotenvモジュールをインストール

$ npm install dotenv --save

gatsby-config.jsから参照できない

gatsby-config.js

require('dotenv').config();

module.exports = {
  siteMetadata: {
    title: 'とおまわりのブログ',
    author: 'とおまわり',
  },
  plugins: [
    {
      resolve: 'gatsby-source-contentful',
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      }
    },

と記述し、$ gatsby developで再度実行したところ・・・

ERROR 

Problems with gatsby-source-contentful plugin options:
spaceId: undefined - "spaceId" is required
accessToken: undefined - "accessToken" is required

require(‘dotenv’).config(); だけでprocess.envオブジェクトのプロパティとして参照できるようになると思ったのですが、undefinedになってしまいました。

stackoverflowで同様の事例を発見

Got it working by npm installing dotenv and doing this:
1) When running gatsby develop process.env.NODE_ENV was returning undefined, but when running gatsby build it was returning ‘production’ so I define it here:
let env = process.env.NODE_ENV || 'development';
2) Then I used dotenv but specify the filepath based on the process.env.NODE_ENV
require('dotenv').config({path: `./.env.${env}`});
https://stackoverflow.com/questions/47086881/setting-environment-variables-in-gatsby

これに従って、gatsby-config.jsの最初に以下の2行を追加すると、無事成功しました。単にdotenvをrequireするだけではなく、パスを指定する必要があるようです。

const env = process.env.NODE_ENV || 'development';
require('dotenv').config({path: `./.env.${env}`});