Unexpected end of JSON input on Netlify

netlify site name = Summertime | Make an enquiry for our luxury villa in Goa
error message = Jun 24, 12:57:15 PM: 7af5f746 ERROR Invoke Error {“errorType”:“SyntaxError”,“errorMessage”:“Unexpected end of JSON input”,“stack”:[“SyntaxError: Unexpected end of JSON input”," at JSON.parse ()“,” at Runtime.exports.handler (/var/task/functions/contact/contact.js:11:19)“,” at Runtime.handleOnceNonStreaming (/var/runtime/Runtime.js:73:25)"]}

The form “contact-us” works well and we receive the data submitted. In the functions folder we have a file called “contacts.js” which is meant to sent a message with the same data to the person who entered the form, in this case me. However I get an error about the JSON.parse line.

exports.handler = async (event, context, callback) => {
/* your server-side functionality */
const data = JSON.parse(event.body)

I have no idea how or where to debug this. It used to work fine so I am at a total loss as other messages have not taught me much.

This is more or less the complete code. Should mailgun-js be replaced with mailgun.js or nodemailer?

require('dotenv').config()

const { MAILGUN_API_KEY, MAILGUN_DOMAIN, MAILGUN_URL, FROM_EMAIL_ADDRESS, CONTACT_TO_EMAIL_ADDRESS } = process.env

const mailgun = require('mailgun-js')({ apiKey: MAILGUN_API_KEY, domain: MAILGUN_DOMAIN, host: "api.eu.mailgun.net" })

exports.handler = async (event, context, callback) => {

	/* your server-side functionality */

	const data = JSON.parse(event.body)	

	var text = `Dear ${data.name}, \n\n`
	text += `\n\nYour message: \n\n`
	text += `${data.message} \n`
	text += `Country of residence: ${data.country} \n`	

	const style = "<style> </style>"
	var body = `<html>${style}<div>`
	body += `<p>Dear ${data.name},</p>`
	body += `<h4>Your message:</h4><p>${data.message}</p>`
	body += `<p>Country of residence: ${data.country}</p>`
	body += `</div></html>`

	let response
	try {
		response = await mailgun.messages().send({
		  	to: data.email,
		  	bcc: CONTACT_TO_EMAIL_ADDRESS,
		  	from: FROM_EMAIL_ADDRESS,
		  	subject: `Enquiry for Summertime from ${data.arrdate}`,
		  	text: text,
		  	html: body
		})
	} 
	catch (error) {
		console.log('Error: ', error)
		return {
		  	statusCode: error.statusCode || 500,
		  	headers: { "Access-Control-Allow-Origin": "*" },
		  	body: JSON.stringify({	error: error.message })
		}
	}

	return {
		statusCode: 200,
		headers: { "Access-Control-Allow-Origin": "*" },
		body: JSON.stringify({ result: 200	})
	}
}

As I mentioned on your StackOverflow post, did you try to log event.body?

I just managed to get the event.body feedback in the return message. I have no idea where the regular console.log goes to as I don’t see that anywhere.

I used this to be able to use the various fields passed:
const params = new URLSearchParams(event.body)

I had a problem with the function not showing up in the first place. I solved that locally by creating a new one:
netlify functions:create contact

I hope I have got it to work on Netlify and am now testing that the mail message generated in contact.js goes to Mailgun.

A function looks so easy but it has been an amazing pain with very few blogs in the last year - I just want to send a mail to the person who submits the form. For example, most blogs mention mailgun-js while that seems to have been replaced by mailgun.js (not a word about it though). I already have wasted more than a day on it.

The functions in my local version (netlify dev) are working properly but not on Netlify (develop branch) itself. I made sure the Node versions are the same (16.15.1). I am stuck now at a loss what more to try.

What stops something to work on Netlify while it works locally?

The netlify url is Summertime | Make an enquiry for our luxury villa in Goa

Hi there, have you checked that you put the environment variables on the netlify servers? You would have to make a separate file under Build And Deploy and Environment. I also got errors like you did when I was working with nodemailer and the reason was that not all env variables where in that special file on the servers.

I am only aware of the “Environment variables” in the Build & Deploy section. They are all there as my local version works fine. Now only the remote, i.e. the Netlify server, is not working - not being triggered it seems.

I still get the message although locally it works ok

Warning: Missing form submission function handler
Request from ::1: POST /contact/contact-us/

Hey @ourmaninindia , we’ve done a bit of research on this site and we’re not seeing that the function is called when the form is submitted.

How are you intending to trigger this function? Are you attempting to do what’s described in this Help Doc about triggering functions? If so, you would need to use the submission-created trigger for things to work as expected.

Hi Amelia, as mentioned it works locally. I have now upgraded the Forms on Netlify to level 1 (it was level 0).

The function files are (as expected) in the functions directory and mentioned as such on netlify.toml as

[build]
publish = “public”
functions = “./functions”

All of this is standard though.

When a user submits the contact form, Netlify will perform a form verification for spam. Once verified, it will trigger the submission-created event. Then, it will call the function automatically - at least that is the expectation. Obviously, it seems I am missing something.

I am not clear what one has to do with “submission-created” that Netlify is not expected to do automatically . I read the docs though. Lever 1 has not solved the issue either. I just checked.

Hi @ourmaninindia

So we can better understand the the current issue, could you walk us through the exact error you’re seeing and the steps to reproduce the error?
If I understand correctly, the form gets submitted correctly, it’s the function that is not working correctly?

Additionally, you mentioned that it use to work, do you know if any changes were made to the function between when it worked and when you started seeing the errors?

Hi Melvin,

I don’t receive any error (at least I don’t see any). You are right, the form gets submitted correctly, it’s the function that is not working,

I had set up this Hugo site some 2 or 3 years ago and now upgraded the Hugo verson from 0.78 to 0.100.1 and the node version was upgraded to v16, all to ensure our high Google Lighthouse rating.

I have been struggling with this since last weekend, at a loss what I may not be seeing properly.

Thanks, Alfred

Hi @ourmaninindia,

We’ve replied in the helpdesk, but also mentioning the TL;DR of that message here. Would you be able to share a minimal reproduction of the above issue? It’s hard to troubleshoot based on textual descriptions.