Gatsby: accessToken: undefined - "accessToken" is required

[DinaShantina]

Description

accessToken: undefined - "accessToken" is required

Steps to reproduce

Since today all the plugins seems to make me problem, i just don't understand why is this happening first project of mine in Gatsby and i have experienced all the problems till now...
this time the error is accessToken: undefined - "accessToken" is required
i uninstalled gatsby-source-contentful and install it again i have still the same problem...
Before i had with env-cmd i fixed that, then with sharp module, i fixed that now this.. please anyone help :(

module.exports = { siteMetadata: { title: "Shanti-Hostel", author: "Dina Shantina", }, plugins: [ "gatsby-plugin-react-helmet", { resolve: "gatsby-source-contentful", options: { spaceId: process.env.CONTENTFUL_SPACE_ID, accessToken: process.env.CONTENTFUL_ACCESS_TOKEN, }, }, "gatsby-plugin-sass", { resolve: "gatsby-source-filesystem", options: { name: "src", path:${__dirname}/src/, }, }, "gatsby-plugin-sharp", { resolve: "gatsby-transformer-remark", options: { plugins: [ "gatsby-remark-relative-images", { resolve: "gatsby-remark-images", options: { maxWidth: 750, linkImagesToOriginal: false, }, }, ], }, }, ], }

[jonniebigodes]

@DinaShantina sorry for the issues you're experiencing.
I've added the same dependencies that you supplied and copied over the content of gatsby-config.js, you have provided it looks like you have some configuration errors.

Your gatsby-config.js should look like:

const dotenv = require("dotenv").config()
module.exports = {
  siteMetadata: {
    title: "Shanti-Hostel",
    author: "Dina Shantina",
  },
  plugins: [
    "gatsby-plugin-react-helmet",
    {
      resolve: "gatsby-source-contentful",
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
    "gatsby-plugin-sass",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "src",
        path: `${__dirname}/src/`, // <= error was here
      },
    },
    "gatsby-plugin-sharp",
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          "gatsby-remark-relative-images",
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 750,
              linkImagesToOriginal: false,
            },
          },
        ],
      },
    },
  ],
}

[DinaShantina]

Hello and thank you for writing me, but i still get this error
error Problems with gatsby-source-contentful plugin options:
spaceId: "***n4o"
accessToken: undefined - "accessToken" is required :(

[jonniebigodes]

@DinaShantina i think this is related to your other issue. After my last comment i've installed env-cmd as a dependency and created a new script on my package.json file to check if might be a problem with this package. My package.json now looks like the following:

"scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "format_config": "prettier --write gatsby-config.js",
    "develop_env_cmd":"env-cmd gatsby develop",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  },

Issued yarn develop_env_cmd and it ran to completion, no errors, i even logged it in gatsby-config.js and the variables were present.
Comparing to your file in your repo. the only diference is the way you´re using it. You don't actually need the ´-f´ flag as it looks like you're not providing a custom path to where your .env file is located, you only need to use it like i've used it in develop_env_cmd.

[DinaShantina]

@jonniebigodes thank you so much for your efforts trying to help me, i put like this the script and still getting the same error with the token..
error Problems with gatsby-source-contentful plugin options:
spaceId: "***n4o"
accessToken: undefined - "accessToken" is required
host (default value): "cdn.contentful.com"
environment (default value): "master"
downloadLocal (default value): false
localeFilter (default value): [Function]
⠋ onPreBootstrap
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop: gatsby develop
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Dina\AppData\Roaming\npm-cache_logs\2019-06-23T22_24_45_953Z-debug.log

Can you upload the file that is working on git the code so i can download it and try to start it? Maybe i have problem with Windows?

[jonniebigodes]

@DinaShantina i've created a gist with the code here, This is the minimal setup i have to get gatsby working contentful.

One quick question that came to mind,
Based on the image below which key are you supplying to the plugin? The preview or the Contentful delivery api key?

[DinaShantina]

@jonniebigodes I am supplying Contentful delivery api key ( I tried though and the Preview ) ...
And now i have also error with the spaceID
error Problems with gatsby-source-contentful plugin options:
spaceId: undefined - "spaceId" is required
accessToken: undefined - "accessToken" is required
host (default value): "cdn.contentful.com"
environment (default value): "master"
downloadLocal (default value): false
localeFilter (default value): [Function]
⠋ onPreBootstrap
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop: gatsby develop
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Dina\AppData\Roaming\npm-cache_logs\2019-06-23T23_40_54_066Z-debug.log

very strange issue i got myself in...
I think is something else the problem... i download it the file directly from the tutorial finished and on npm develop showed me the exact error... what can be the problem i am wondering still...

[jonniebigodes]

@DinaShantina i've just got your updated version of the repository and a couple of things.

• In gatsby-config.js the line const dotenv = require("dotenv").config() should be commented as you don't have that package and it could cause issues.
• Running gatsby develop i get the following:

error Problems with gatsby-source-contentful plugin options:
spaceId: undefined - "spaceId" is required
accessToken: undefined - "accessToken" is required
host (default value): "cdn.contentful.com"
environment (default value): "master"
downloadLocal (default value): false
localeFilter (default value): [Function]
⠋ onPreBootstrap
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop: `gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Which is somewhat similar to what you're experiencing. This because the environment variables are not set.

• Running develop_env_cmd script will throw the following error:

Error: Unable to locate env file at location (gatsby)
    at c:\Users\paxa2\Documents\gatsby_fork\testmobileheader\test_DinaShantina\updated-version\gatsby-shanti-hostel\node_modules\env-cmd\dist\get-env-vars.js:36:23
    at Generator.throw (<anonymous>)
    at rejected (c:\Users\paxa2\Documents\gatsby_fork\testmobileheader\test_DinaShantina\updated-version\gatsby-shanti-hostel\node_modules\env-cmd\dist\get-env-vars.js:5:65)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:744:11)
    at startup (internal/bootstrap/node.js:285:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop_env_cmd: `env-cmd -f gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] develop_env_cmd script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

This is based on the principle that you have the .env file at the same level as package.json and gatsby-config.js like the image below demonstrates:

If that's the case, then you don't need the -f flag as the package in question will look and load the contents of the file there, otherwise you need to add the path to the file in the script.

For demonstrational purposes, i've created a folder called config and moved the .env file inside that folder. Transforming the folder structure like so:

For this case, then your script needs to be updated and the -f flag should be set, transforming it into env-cmd -f ./config/.env gatsby develop.

Issuing yarn develop_env_cmd with this configuration will produce a successfull build like before.

[DamengRandom]

After done few searches,

I found that we can set environment variables through netlify website, here are the steps:

Under your own netlify console platform, please go to settings
Choose build & deploy tab (can be found on sidebar)
Choose environment sub-tab option
Click edit variables and add/put your credentials in
Done !!
Wish this helps you.

Cheers

[DinaShantina]

Ok so started the folder i just reinstalled the npm again i put again the variables and its working now...
So tnx everyone for the help...

[wardpeet]

Thanks all for helping DinaShatina out!

[Paahn]

I was having the same trouble with DinaShatina and I solved it by moving the let activeEnv declaration to the top of the gatsby-config.js file. Find full code here

[sstrubberg]

Had the same-ish issue and after blowing away my node_modules and removing and reinstalling my plugins, I found that i somehow gave my .env one extra character on the access token key.... oy. PEBCAK

[MartDL]

Hi Dina,
I’m having exactly the same fault. How did you solve it in the end??
Many thanks
Martin

[diyarfaraj]

having the same issue. Tried @Paahn s solution, but did not solved anyhting. Are you guys on winows or mac?

[MartDL]

I got round it in the end by reinstalling the npm and adding the variables again and it worked... seems Dina did the same too :-)

[diyarfaraj]

Hi Martin
By reinstalling npm, you mean I remove NPM and then install npm again? Do I need to install all the packages again one by one?

Thanks!:)

[MartDL]

No, so I hard coded the contentful api keys first in gatsby config which worked fine so I knew the fault was between the variables and the config..
Then I removed and reinstalled the npm plugin for contentful... added the variables again and ran the server and it worked..
hope this helps !

[martink-rsa]

I encountered the same error as OP and searching for the error message mostly leads to this issue.

I wasn't able to get the above fixes to work, but it did work with the spaceId and accessToken values being set to the static values from Contentful instead of the variable.

I deleted node_modules multiple times in the process of trying the above fixes and this did not resolve the issue.

All of the npm scripts wouldn't work and had the same error with exception of npm run develop which contained the env-cmd reference (unsure of the correct term).

"develop": "env-cmd -f .env.development gatsby develop",

I created a new alias for gastby build with the env-cmd segment and it built with no errors. The alias looked as follows:

"gbuild": "env-cmd -f .env.development gatsby build",

There doesn't appear to be any negative side effects of the above, but I don't have the experience to state that this is a valid fix.

In case it matters and helps others, I was following _The Great Gatsby Bootcamp - Full Gatsby.js Tutorial Course_ by Mr Andrew Mead.

Full scripts list looks as follows:

  "scripts": {
    "build": "gatsby build",
    "gbuild": "env-cmd -f .env.development gatsby build",
    "develop": "env-cmd -f .env.development gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },

[givionte]

I'm a Windows 10 user, I followed @Paahn gist exactly, and it worked perfectly to solve this problem for me. Seems to me running the command 'env-cmd gatsby develop/build' causes a conflict. Setting the config properly as Paahn did will allow .env variables to load during build time. Most of the older tutorials like Andrew Mead's Great Gatsby showed differently, so this may be the cause of some of the confusion. A lot has changed in the last year to the build process.

[Paahn]

I was on Windows 10 as well, maybe that config is not working for other OS?

[dewaleolaoye]

I encounter this issue as well but I noticed it's coming from the way I run the command,
I have this in my package.json develop: "env-cmd --file .env.development gatsby develop".

If I run gatsby develop, I got errors because it can't read the .env file variables hence, it throws undefined, but when I use yarn develop.
Everything seems to work fine.

[ngerbauld]

I was with the same issue but is working now with yarn develop.

[dennisclemente]

I know most people here suggest yarn develop to fix this but I don't want to use yarn. Any other solution other than yarn develop? (I've tried all other suggestions except yarn develop to no avail.)

[kkartikeye]

did anyone find a way around this? I am also stuck

[khairahscorner]

If you're on Windows and you have this issue, I did too and I just fixed it by following this Gatsby doc on setting up environment variables: https://www.gatsbyjs.org/docs/environment-variables/.

Added this to my gatsby-config.js file:

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

Everything worked fine afterwards. @kkartikeye maybe this would help!

[Raulif]

I'm on Mac. What I identified as the problem is that the CONTENTFUL_ACCESS_TOKEN variable is not being automatically set on the .env files. The CONTENTFUL_SPACE_ID was there, but not the access token.
What I did was manually copying the value of the --deliveryToken which appears in the 4th step of the Contenful setup page (the one where it tells you to clone the repo, install the dependencies, etc...) and paste it as the value of the CONTENTFUL_ACCESS_TOKEN in the .env files. A bit misleading that one is expected to be called Access Token and the other one Delivery Token.
But anyway, I copied the value manually on to the .env files, re-run npm run dev and it worked!