PLEASE help me fix this issue ( check console )
P.S the app working without issues on local host (VS CODE) but when I launched it on netlify i got this problem.
If you can share the repo we can help, otherwise it will be hard to debug the error you are seeing. Thanks.
Here is the javascript error I’m seeing in the console.
This error in in your App.js
1 Like
Hi @Rokinos
There is a succession of errors which I believe begins with the call to Unsplash which looks like
https://api.unsplash.com/photos/?client_id=undefined&page=1
which returns
Failed to load resource: the server responded with a status of 401 ()
with the error message
“OAuth error: The access token is invalid”
because the
process.env.REACT_APP_API_KEY
is returning undefined rather than a value. The TypeError as mentioned by @talves appears to stem from this API call as your script is trying to iterate over the returned object but no object is returned.
Have you set this environment variable in the Netlify UI?
Also note that if this key is a secret key, don’t use it inside a React app in this fashion as it is viewable to anyone. If you need to keep this key secret, move the API call to a serverless function instead.
1 Like
I will try now make the API KEY PUBLIC and see if it works thanks mate for explanation , Respect !!!
@coelmay Have you set this environment variable in the Netlify UI?
I do not know the environment variable you talking about
REACT_APP_API_KEY is the name of the environment variable which is then accessed using process.env.REACT_APP_API_KEY.
1 Like
@coelmay Yaaaaaay !!! it works after making KEY public. thanks bro
Now i have to learn about the other way to hide KEY.
thank you so much netlify
i knew about .env yesterday and today I did use it on this project but didn t work for me
You could use .env as you might when developing locally, but that would require pushing the file to GitHub as well. Most of the time .env will end up in .gitignore to stop potentially sensitive environment variable becoming exposed. This is why environment variables exist in the Netlify UI.
Using serverless functions is the best way.
1 Like