Netlify Functions Promise Rejected Invalid JSON in Vite Vue Project

48 views Asked by At

I have a site using Vue and Vite. It is deployed to netlify and I am attempting to configure the most basic netlify function to start querying faunadb from them, but am stuck.

I have a netlify.toml file that points to the folder where the functions are defined.

// netlify.toml
[build]
  functions = "netlify/functions"
  # This will be run the site build
  command = "npm run build"
  # This is the directory is publishing to netlify's CDN
  publish = "dist"

I built the most basic netlify function to just simply return a string

// netlify/functions/hello-world.js
export const handler = async () => {
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: 'Hello world!'
    })
  }
}

Then I am simply calling it like this:

fetch('/netlify/functions/hello-world').then((response) => {
  console.log('response', response)
})

And am getting back this response:


{}

Which of course returns an error when trying to convert to JSON

Uncaught (in promise) SyntaxError: Unexpected token 'e', "export con"... is not valid JSON

I am building my project using the netlify dev command.

My package.json has the proxy set too:

{
  "name": "my-project",
  ...,
  "devDependencies": {
    "netlify-lambda": "^2.0.16",
  ...
  },
  "proxy": {
    "/netlify/functions": {
      "target": "http://localhost:8888",
      "pathRewrite": {
        "^/\\.netlify/functions": ""
      }
    }
  }
}

So the question is, what am I doing wrong here and has anyone experience this before that has a solution or knows of a step that was missed?

I have checked their docs, watched the intro video, reviewed the sample repos and dumbed it down to the most basic implementation, or so I thought, and am still not progressing.

Thanks!

0

There are 0 answers