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

2019-09-26

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

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

.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}`});