Simple HTML/JS project, having difficulty with accessing API key as set on the Netlify UI

I believe I’m experiencing issues with accessing the API key that I’ve set under Netlify env variables. Application is deployed fine, but fetching to unsplash via button click results in 500 error, “Uncaught (in promise) SyntaxError: Unexpected token ‘R’, “ReferenceE”… is not valid JSON”:

Not using dotenv or webpack, this is a simple HTML/JS application. My fetch with the API secret key (in an .env file) works fine locally via netlify dev, but not on deploy. I did set my API key using the same variable name and value on the Netlify UI (although I did it via CLI command), checked the value which looks exactly the same on Netlify as it does in my .env file. Please help?? I’m including my function and my netlify.toml file.
I’ve read seemingly all the posts here and elsewhere as well as the docs, some of which makes sense and some of which is over my head. Def not a dev ops expert… Thanks in advance!!!

My netlify function is in a file called fetch-unsplash.js which is located inside the top level functions directory.

const handler = async (event) => {
  const API_KEY = process.env.API_KEY
  console.log("looking for this value in my logs: ", API_KEY) 
     // this does not log anything in the build logs, sadly
  const URL = `${API_KEY}&username=theluckyneko`

  try {

    const resp = await fetch(URL)
    const result = await resp.json()
    return {
      statusCode: 200,
      body: JSON.stringify({ message: result })
  } catch (error) {
    return { statusCode: 500, body: error.toString() }

module.exports = { handler }

netlify.toml file is simple:

  functions = "functions/"
  publish = ""

function inside my index.js is simple, just calls the fetch-unsplash endpoint and does some stuff…

const fetchCatPic = async () => {
  const resp = await fetch('/.netlify/functions/fetch-unsplash')
  const result = await resp.json()
  kitties.src = result.message.urls.small
  kitties.alt = result.message.alt_description

We wouldn’t expect your function to log anything in your build logs when it runs. Just to make sure - are you aware that at build time we are generating static content that doesn’t run at browse time (with the exception of your function).

So: are you looking in your function logs? These are what I’m talking about:

I can sure see the value in the logs there, although the function errors out :slight_smile:

Thank you I had no idea where to find those function logs. Super helpful. Most importantly tho, I’m here to seek help in resolving my function erroring out. Works completely fine using netlify dev. And the env variable value stored on Netlify looks accurate (aka same as what I have in my local .env file.).
Is is possible that process.env is somehow out of scope? My assumption was that during build, the env variable stored on Netlify would be injected into that netlify function so when it’s fired off by fetchCatPic I would get my new cat pic. Where am I going wrong?

At least in your response, I see this:

ReferenceError: fetch is not defined

Are you using node-fetch? If yes, have you imported it correctly? If not, are you using Node 18 inside Functions? If not, you might want to add an environment variable named AWS_LAMBDA_JS_RUNTIME to nodejs18.x.

@hrishikesh THANK YOU!!! Setting the new env variable AWS_LAMBDA_JS_RUNTIME to nodejs18.x TOTALLY did the trick.

I was not using node-fetch (to be honest, I hadn’t heard of it. I’ve always used fetch as provided by the Window object/API.) So AWS just needed the current version of node? It’s strange that the unsplash fetch netlify function was breaking but my fetchMeme (non-netlify) function was working just fine. I’m curious as to why that would be. I’ll research this but if you have a sec and a simple explanation I would be very grateful. Either way thank you for helping me solve this conundrum!!! :two_hearts: :partying_face:

1 Like

Ahh I see that the default node version is16.x as per the docs. Still don’t know why it was breaking but I do see how easily it was to change the node version