process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN produces undefined

[stormasm]

const httpLink = new HttpLink({
uri: 'https://api.github.com/graphql',
headers: {
authorization: Bearer ${ process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN },
},
});

The process.env code is unreliable and for me on slower browsers I get an UNDEFINED...

When I replace that code with the solution below it all works.
It is possible that I may be the only one seeing an issue with this...
And if that is the case then your solution works great !

However, in doing some research on the internet I have noticed other people's issues
with Webpack, process.env etc...

I have implemented what I believe to be a much more robust solution for getting the
github-auth-token

You can check it out....
If you like the idea we can scope out me doing a pull request to change the current implementation.

Here is an explanation of my change.

https://github.com/stormasm/garg/blob/master/Readme.md

We could come up with a design where the user simply has to edit a file
we have already created and pop in their github-auth-token...

About as simple as having to edit an ENVIRONMENT variable.

The other solution might be to wrap that code in an async / wait...
But that seems way more complicated...
Curious to know what others think...

Thanks,
Michael

[rwieruch]

Hm, interesting 👍I had several problems with the .env file in the past too. Hoped that these problems were solved for people nowadays... Anyone else having problems with it?

Your solution works too. However, I would want to go with the official environment variables instead of defining those variables in the JavaScript code. We should find out why the environment variables don't work for you in the first place.

[stormasm]

Agreed, let me research further why the environment variables are not working for me. And further more, lets see if anyone else is having this issue. If its just me, then I have some work to do to figure it out. Thanks for your help. I will post you when I find out whats up.

[rwieruch]

@stormasm do you remember whether you got this fixed for you? I keep this open for other folks, so they may can use your advice to get it fixed for themselves.

[stormasm]

@rwieruch I am on travel through mid November, when I return I will review my findings and retest taking your concept out of the box and see what I come up with... Since we last spoke about this issue I have found other solutions similar to yours that were slightly similar but worked better... I will elucidate further around mid November or sooner if I get some free time prior to returning.. Thanks for checking back in with me... I am happy to help out on this one.

Thanks,
Michael

[stormasm]

@rwieruch I decided to review this issue right away and see what was going on...

Everything is working for me now !

In the file src/index.js

const httpLink = new HttpLink({
  uri: GITHUB_BASE_URL,
  headers: {
    authorization: `Bearer ${
      process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN
    }`,
  },
});

The environment variable is now being read properly...

My issue may have been that for some reason I wasn't checking first to see that the environment variable actually loaded up into my environment prior to running

npm start

This time on my Macbook what I did was set the environment variable in the .env file and then ran the command

source .env

NOTE : For folks who are running windows this command might be different

Then I checked that the environment variable was loaded up by running the command

env | grep GITHUB

And then I ran

npm start

[rwieruch]

Thanks for checking @stormasm I think your tips will help people who stumble upon this issue 👍

[steinitz]

I also had problems with the .env bearer token int this project. Hard-coding the token in the App.js works around the issue. Oddly, I had no problems with the .env token previously in this course.

Like @rwieruch I've had on-and-off success with .env over the years and had been pleasantly surprised that it worked so consistently-well up to now in the course.

@stormasm, your diagnostic technique is useful, thank you. I wasn't able to successfully grep the token in this project and so knew I had to "hard code" it.

One last thought. I noticed in the absence of a token, 'data' can be undefined (in the Profile component) so it throws on

const { viewer } = data;

That means there might be a way to indicate to the user/developer that the token is missing or invalid.

[steinitz]

Follow up

I was able to use the undefined data value to return an error component which showed 'Missing Token' - helpful in debugging.

To fix the .env issue I referred to this post: create-react-app issue

Summary:

• removed dotenv from my package.json (its already there via react scripts) and did yarn install
• prefixed my environment variable with REACT_APP_ e.g. REACT_APP_TOKEN
• renamed my .env to .env.development
• executed yarn build (probably not needed)

and lo and behold the token value was there.

[digitalh2o2]

Ran across this issue and what @steinitz mentioned worked for me but I simply removed "dotenv" from my package.json file and reran yarn install. After installing again I was ran npm start and it was working correctly.

[bernardReact]

I know its a long time but im trying to use apollo and query github's graphql api using this code;
const GITHUB_BASE_URL = "https://api.github.com/graphql";

const httpLink = new HttpLink({ uri: GITHUB_BASE_URL, headers: { authorization: ``Bearer ${process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN}``, }, });

the extra backticks is just because i need you guys to see it as code.

const Profile = () => (

{({ data, loading }) => {
if(!data){
console.log("No Data");
console.log(process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN);
}
const { viewer } = data;
if (loading || !viewer) {
return

Loading ...

;
}
return (

{viewer.name} {viewer.login}

);
}}

);

i can see the token in the console but undefined as the data.