Contentful with react expected parameter accessToken error - reactjs

Question

I created a contentful blog in a separate project below and would like to add my blog to my blog.js page in my main project. I sent up my Environment Variables in an .env file and my Access Token was exposed on github and I never had this problem in my gitignore file. Not sure if I have to change Set Environment Variables in Windows 10.
I also have "dotenv": "^8.2.0", and "config": "^3.3.2", as a dependency for my mini social network for my users and profile. Not sure if I have to add require('dotenv').config(); to client.js.
.gitignore file:
.env
node_modules/
config/default.json
.env.development
client.js file:
import * as contentful from "contentful";
export const client = contentful.createClient({
space: process.env.REACT_APP_SPACE_ID,
accessToken: process.env.REACT_APP_SPACE_TOKEN,
});
.env
REACT_APP_SPACE_ID=my access key
REACT_APP_SPACE_TOKEN=my access token
Console error:
createClient
56 | */
57 | function createClient(params) {
58 | if (!params.accessToken) {
> 59 | throw new TypeError('Expected parameter accessToken');
60 | }
61 |
62 | if (!params.space) {
I also have a config file for my mongoDB and I'm not sure if this of sets my Contentful accesstoken
config/db.js
const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');
const connectDB = async () => {
try{
await mongoose.connect(db, {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true,
useFindAndModify: false
});
console.log('MongoDB Connected...');
} catch(err){
console.error(err.message);
// exit process with failure
process.exit(1);
}
};
// db.js
module.exports = connectDB;
Just added my .env file path to use via the path
server.js
const express = require('express');
const connectDB = require('./config/db');
const app = express();
// Connect Database
connectDB();
// Init Middleware
app.use(express.json({ extended: false }));
app.get('/', (req, res) => res.send('API Running'));
//DEfine Routes
app.use('/api/users', require('./routes/api/users'));
app.use('/api/auth', require('./routes/api/auth'));
app.use('/api/profile', require('./routes/api/profile'));
app.use('/api/posts', require('./routes/api/posts'));
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));
//server.js

Answer 1

To solve this problem you have to add the environment variable in the right path for contentful blog you have to place in .env.development.
.env.development
REACT_APP_SPACE_ID=my access key
REACT_APP_SPACE_TOKEN=my access token
You can risk to expose your token if you place your .env.development outside of your project. If you place console.log(process.env); in the area you want to test. Be sure to restart the server to test by placing npm start in the terminal every time you test the console.log.
client\src\client.js
import * as contentful from "contentful";
console.log(process.env);
export const client = contentful.createClient({
space: process.env.REACT_APP_SPACE_ID,
accessToken: process.env.REACT_APP_SPACE_TOKEN,
});
If you place the environment variable in the wrong area you receive an undefined
Object
FAST_REFRESH: true
NODE_ENV: "development"
PUBLIC_URL: ""
WDS_SOCKET_HOST: undefined
WDS_SOCKET_PATH: undefined
WDS_SOCKET_PORT: undefined
__proto__: Object
If you test your .env.development file in the appropriate area you will see your access key and access token will be displayed in the console.
Object
FAST_REFRESH: true
NODE_ENV: "development"
PUBLIC_URL: ""
REACT_APP_SPACE_ID: "my access key"
REACT_APP_SPACE_TOKEN: "my access token"
WDS_SOCKET_HOST: undefined
WDS_SOCKET_PATH: undefined
WDS_SOCKET_PORT: undefined
__proto__: Object