类型错误：react Js 中的预期参数 accessToken

Question

Error screenshot:

While running react project by npm start , it shows error related to contentful.js . why does the package shows these types of error? I attached the screenshot with this post. How to solve this issue?

.env file

CONTENTFUL_ACCESS_TOKEN: process.env.REACT_APP_CONTENTFUL_ACCESS_TOKEN,

config file

import SETTINGS from "../env";
const contentfulClient = contentful.createClient({
  space: SETTINGS.CONTENTFUL_SPACE,
  accessToken: SETTINGS.CONTENTFUL_ACCESS_TOKEN
});

Do i need to enter api token anywhere?

.env

const SETTINGS = {
  LANDING_BLOG_POSTS: "",
  ICON_TYPE: "svg",
  CONTENTFUL_SPACE: process.env.REACT_APP_CONTENTFUL_SPACE,
  CONTENTFUL_ACCESS_TOKEN: process.env.REACT_APP_CONTENTFUL_ACCESS_TOKEN,
  CLOUDINARY_UNSIGNED_PRESET: process.env.REACT_APP_CLOUDINARY_UNSIGNED_PRESET,
  CLOUDINARY_CLOUD_NAME: process.env.REACT_APP_CLOUDINARY_CLOUD_NAME,
  SERVER_7CHIP: process.env.REACT_APP_SERVER_7HIP || false,
    HARD_CODED_USERNAME: process.env.REACT_APP_TOKEN_USERNAME || "**********",
  HARD_CODED_PASSWORD: process.env.REACT_APP_TOKEN_PASSWORD || "************",
  FACEBOOK_API_ID: process.env.REACT_APP_FACEBOOK_APP_ID,
  FACEBOOK_PAGE_TOKEN: process.env.REACT_APP_FACEBOOK_PAGE_TOKEN,
  FACEBOOK_PAGE_ID: process.env.REACT_APP_FACEBOOK_PAGE_ID || "**************",
  FACEBOOK_SERVER_CALL: true
};
export default  SETTINGS;

Answer 1

Since your code got as far as getting into the createClient function, that tells me your SETTINGS object is loading (otherwise you'd get a TypeError from accessToken: SETTINGS.CONTENTFUL_ACCESS_TOKEN ). However the error message says that no accessToken was provided.

Therefore SETTINGS.CONTENTFUL_ACCESS_TOKEN is undefined , null or an empty string. Since that value is set to process.env.REACT_APP_CONTENTFUL_ACCESS_TOKEN this probably means that you have not set your REACT_APP_CONTENTFUL_ACCESS_TOKEN environment variable before running the program.

Try setting that environment variable to your access token value, then running the program.

If that works, you might want to reconsider the approach. You have an "env" file but is getting values from system environment variables. Usually you have an "env" file so that you can hardcode values into it, not rely on them being set externally. If they have to be set externally you might as well not use an "env" file and just use process.env.VARIABLE_NAME directly in your code.

Note that if you hardcode access tokens or other private information in an "env" file, you should add that file to .gitignore so that passwords/keys are not stored in git .

Answer 2

You could use dotenv-webpack module for env variables in react.js.

https://www.npmjs.com/package/dotenv-webpack

And in.env file, env variable should be declared like

CONTENTFUL_ACCESS_TOKEN = 'AccessToken'

And call env variable like this in react.js

process.env.CONTENTFUL_ACCESS_TOKEN // should print 'AccessToken'

And then

const contentfulClient = contentful.createClient({
  space: process.env.CONTENTFUL_SPACE,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
});

Answer 3

You created.env.development file same location as package.json file.

hope, this will help you.

Answer 4

For me, I had the variables in the .env file in the source directory and just had to source it. I ran . ./.env . ./.env and that sorted out the error in my case.

Answer 5

In my case environment variables weren't accessible, because I created the.env file when my server was already running. I had to restart the server and everything worked like a charm.