Having issues with my netlify function on my react app

Support
, ,
1

Hello!
I am trying to fetch this affirmation api (GitHub - annthurium/affirmations: A tiny api for fighting impostor syndrome and building example apps, build with Express.) using a netlify function on my react app. However, when I try to deploy the site locally, I get this error in my console:

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Here is my fetch utils

export async function getAffirmation() {
  const rawResponse = await fetch('/.netlify/functions/affirmations');
  const data = await rawResponse.json();
  return data;
}

Could someone please point me in the right direction on what I might be missing? Thank you!

2

@bethmelmtv Going only from what you’ve posted, I’d presume that the call to the function isn’t returning json but text, specifically it looks like it’s returning a html page, which may even be a default 404 error.

When you try to access the response body as json via rawResponse.json(), it’s failing to parse it as such.

Another issue that you may be running into is that you can’t necessarily host a regular long running express server with Netlify, but if you’ve adjusted the code so that it’s running as a Function then that won’t be your issue.

3

Hello nathan I am asking facing a somewhat similar issue “json parse unexpected character”
I am sending json data from the lambda function to the react app but get the error in the console. Url used is correct as I tested it in the dev environment by going to http://localhost:9000/get-data?seconds=1668153022 and I can see data in the browser being returned

4

I have posted my question here: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data