Moving from gatsby cloud - build is OK but gatsby function returns bad gateway 502 (cannot read prop undefined)

Support
1

I have been trying to port my gatsby blog from gatsby cloud to netlify.
I have one gatsby function - a contact form with sendgrid.
the site builds perfectly.
netlify says I have one function running (some sort of netlify wrapper around the gastby __api/from function)
The function was working fine on gatsby cloud.
To simplify debugging - i commented out the original code and simply went with the simplest function (from gastby blog) :

export default function handler(req, res) {
res.status(200).json(“testing”)
}
I cannot understand what could be undefined in that.
my site is: sage-tulumba-315502

I also tried hitting the function at https://normfrenette.com/api/form with insomnia. I get the same error as through the contact form in the blog - namely:
{
“errorType”: “TypeError”,
“errorMessage”: “Cannot read properties of undefined (reading ‘100’)”,
“trace”: [
“TypeError: Cannot read properties of undefined (reading ‘100’)”,
" at forEachCode (/var/task/node_modules/http-errors/index.js:261:45)“,
" at Array.forEach ()”,
" at populateConstructorExports (/var/task/node_modules/http-errors/index.js:259:9)“,
" at Object. (/var/task/node_modules/http-errors/index.js:31:1)”,
" at Module._compile (node:internal/modules/cjs/loader:1256:14)“,
" at Module._extensions…js (node:internal/modules/cjs/loader:1310:10)”,
" at Module.load (node:internal/modules/cjs/loader:1119:32)“,
" at Module._load (node:internal/modules/cjs/loader:960:12)”,
" at Module.require (node:internal/modules/cjs/loader:1143:19)“,
" at require (node:internal/modules/cjs/helpers:121:18)”
]
}

Please help. I have a live blog but no working contact form.

2

hi

Thanks for reaching out! are you using the latest adapter version?

How are you implementing this form?

Thanks!

3

Hi,
I am using gatsby version 4.25.7. Do not want to upgrade because this is a blog that works and I simply add markdown pages to it. (the single function I use is a contact form - and it used to work on Gatsby cloud - so I never touch it).

Netlify documentation - can’t find it again - said that with this version I am not suppose to use the adapter but rather the plugin - gatsby-plugin-netlify - which I have added to my config file as directed. I am thinking it works since all the blog shows up fine - it’s only the function that does not work.

Since I posted this, I had to change the code currently on netlify because I needed this to work. So the from filled by my user now hits my personal server (linode…) and that is working since I am not using the function.
I would rather use the gatsby function though…

With respect to your question about the code I used:
For the Gatsby function - which is still stored under src/api.form.js - I had simplified the code so it would always return “testing”. I tested that in my local dev with gatsby develop and it worked (returned “testing”)
the code:
export default function handler(req, res) {
res.status(200).json(“testing”)
}
note: as a support engineer, if you have access to my site - look under src/api/form.js - you will see the original function commented out - which was the initial function that gave me the 502 error.

under src/pages/contactfrom.js:
In the contact form I am using: (based on a tutorial from Gatsby site)
import { useForm } from “react-hook-form”
and:
const { register, handleSubmit, formState: {errors}, reset, } = useForm()

the function I pass to HandleSubmit in the onSubmit of the form did a fetch:

fetch(/api/form, {
method: POST,
body: JSON.stringify(data),
headers: {
“content-type”: application/json,
},
})
.then etc. etc.

So basically, all this was working in Gatsby cloud, and working on my dev machine with Gatsby develop.

After porting to netlify, the dashboard said I had a netlify function running at __api , which is what I expected. But when I tried the contact form - I would get the 502 error. I figured, since I had simplified the function to a simple response with no processing, the problem had to be on how netlify wrapped the Gatsby function in a netlify function…

4

Hi there,

It’s definitely interesting that the minimal function code still threw an error: I ran a quick test on my end with a minimal Gatsby 4 function using the same syntax, and the invocation was successful: https://github.com/littlemarcus/hello-world-function/blob/main/src/api/hello-world.js // https://spiffy-capybara-ce3d2a.netlify.app/

We unfortunately don’t have access to your site code, so if you could provide the entire contents of the function file (or better yet, a minimal reproduction) that will help us debug further.

You are certainly on the right track, though! Your bare-bones function should definitely work, so the next steps are to determine whether there is any extra/unneeded function configuration (in your environment variables, netlify.toml file, etc).

5

Hi I am having the exact same issue (moving from Gatsby Cloud to Netlify with the exact same error). Did you fix this error @norm1? I am stuck on this for hours

6

Actually I now fixed, I dont know the exact reason, but deleting package-lock.json and /node_modules locally and then reinstalling with npm install fixed it

7

thanks for writing back and sharing your solution with the community!