Gatsby: Not reading .env files?

Created on 29 Aug 2019  路  2Comments  路  Source: gatsbyjs/gatsby

Description

While working with gatsby-source-graphql to query data from GitHub, I received 401 a error in which the plugin would not query the data. After various different methods yielded the same error, including changing environments (both of which are listed at the bottom) I found that both environments yielded success when I placed my OAuth key directly within my gatsby-config, and Environment 2 (Fedora Linux) seemed to succeed with the key placed in an env.production folder (though I was running gatsby develop) and referenced as suggested in the documentation. This leads me to believe the issue stems from an unknown error(s) with Gatsby reading .env files. My band-aid solutions work for now but a proper fix would be greatly appreciated!

Steps to reproduce

  • Start with cloning the gatsby-starter-default as normal using "gatsby new"
  • Add the following object into the plugins array in gatsby-config.js:
{
      resolve: "gatsby-source-graphql",
      options: {
        typeName: "GitHub",
        fieldName: "github",
        url: "https://api.github.com/graphql",
        headers: {
          Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
        },
      },
    }, 
  • Follow the steps here to set up an OAuth Token with the necessary permissions.
  • Create a .env.development at the project root and enter GITHUB_TOKEN=token
  • Run "gatsby develop"

Expected result

No error, accessing localhost:8000/__graphql shows all queryable fields including "github".

Actual result

Output of initial build yields the following within the output:

 ERROR #11321  PLUGIN

"gatsby-source-graphql" threw an error while running the sourceNodes lifecycle:

Response not successful: Received status code 401



  ServerError: Response not successful: Received status code 401

  - index.js:23 Object.exports.throwServerError
    [portfolio]/[apollo-link-http-common]/lib/index.js:23:17

  - index.js:48
    [portfolio]/[apollo-link-http-common]/lib/index.js:48:21

  - task_queues.js:85 processTicksAndRejections
    internal/process/task_queues.js:85:5

Project will still build, but accessing GraphiQL does not yield a github field with the data; attempting to query within a component using useStaticQuery breaks the build.

Environment 1

[In this environment, neither .env.development nor .env.production worked]
System:
OS: Windows 10
CPU: (6) x64 Intel(R) Core(TM) i5-8600K CPU @ 3.60GHz
Binaries:
Yarn: 1.17.3 - C:Program Files (x86)Yarnbinyarn.CMD
npm: 6.11.2 - C:Program Filesnodejsnpm.CMD
Languages:
Python: 3.7.4 - /c/Python37/python
Browsers:
Edge: 44.17763.1.0
npmPackages:
gatsby: ^2.14.6 => 2.14.6
gatsby-image: ^2.2.10 => 2.2.14
gatsby-plugin-manifest: ^2.2.6 => 2.2.9
gatsby-plugin-offline: ^2.2.7 => 2.2.10
gatsby-plugin-react-helmet: ^3.1.4 => 3.1.5
gatsby-plugin-sharp: ^2.2.13 => 2.2.18
gatsby-source-filesystem: ^2.1.11 => 2.1.18
gatsby-source-graphql: ^2.1.11 => 2.1.11
gatsby-transformer-sharp: ^2.2.7 => 2.2.12

Environment 2

[In this environment, .env.production worked, but not .env.development]
System:
OS: Linux 5.2 Fedora 30 (Workstation Edition) 30 (Workstation Edition)
CPU: (4) x64 Intel(R) Core(TM) i3-7100U CPU @ 2.40GHz
Shell: 5.0.7 - /bin/bash
Binaries:
Node: 12.9.1 - /usr/bin/node
Yarn: 1.17.3 - /usr/bin/yarn
npm: 6.11.2 - /usr/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Firefox: 68.0.2
npmPackages:
gatsby: ^2.13.67 => 2.13.67
gatsby-image: ^2.2.8 => 2.2.8
gatsby-plugin-manifest: ^2.2.5 => 2.2.5
gatsby-plugin-offline: ^2.2.6 => 2.2.6
gatsby-plugin-postcss: ^2.1.3 => 2.1.3
gatsby-plugin-react-helmet: ^3.1.3 => 3.1.3
gatsby-plugin-sharp: ^2.2.12 => 2.2.12
gatsby-source-filesystem: ^2.1.9 => 2.1.9
gatsby-source-graphql: ^2.1.11 => 2.1.11
gatsby-transformer-sharp: ^2.2.6 => 2.2.6
npmGlobalPackages:
gatsby-cli: 2.7.40

question or discussion

Most helpful comment

Try to add this at the top of the file

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

more info on environment-variables here:
https://www.gatsbyjs.org/docs/environment-variables/

All 2 comments

Try to add this at the top of the file

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

more info on environment-variables here:
https://www.gatsbyjs.org/docs/environment-variables/

Tested on both environments, seems it did the trick! Guess that was my mistake, thanks for the help.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kalinchernev picture kalinchernev  路  3Comments

benstr picture benstr  路  3Comments

dustinhorton picture dustinhorton  路  3Comments

Oppenheimer1 picture Oppenheimer1  路  3Comments

theduke picture theduke  路  3Comments