ERROR 500 on axios API Call in Next JS after deployment to Vercel - deployment

Question

I am using a simple API to send Emails via axios and nodemailer in Next JS.
Locally everythings works normally, after deployment to Vercel i am getting Error 500 when trying to send an Email.
This is from the Form Component:
async function onSubmitForm(values) {
setLoading(true);
let config = {
method: "post",
url: `${env.process.NEXT_LINK}/api/contact`,
headers: {
"Content-Type": "application/json",
},
data: values,
};
try {
const response = await axios(config);
setLoading(false);
setSuccess(true);
} catch (err) {
console.log("frontend error", err);
}
}
Getting this Error in Dev Tools:
frontend error
o {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}
code
:
"ERR_BAD_RESPONSE"
config
:
{transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
message
:
"Request failed with status code 500"
name
:
"AxiosError"
request
:
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response
:
{data: '', status: 500, statusText: '', headers: {…}, config: {…}, …}
[[Prototype]]
:
Error
The contact API File:
import handlebars from "handlebars";
const nodemailer = require("nodemailer");
const path = require("path");
const fs = require("fs");
export default async (req, res) => {
const { firstName, name, email, message, phone } = req.body;
const transporter = nodemailer.createTransport({
host: "smtp.gmail.com",
port: 465,
secure: true,
auth: {
user: process.env.NEXT_USER,
pass: process.env.NEXT_GMAIL,
},
});
await new Promise((resolve, reject) => {
// verify connection configuration
transporter.verify(function (error, success) {
if (error) {
console.log(error);
reject(error);
} else {
console.log("Server is ready to take our messages");
resolve(success);
}
});
});
const filePath = path.join(__dirname, "../../../../components/form/html/template.html");
const source = fs.readFileSync(filePath, "utf-8").toString();
const template = handlebars.compile(source);
const replacements = {
name: name,
email: email,
phone: phone,
message: message,
};
const htmlToSend = template(replacements);
await new Promise((resolve, reject) => {
if (!firstName) {
try {
const emailRes = transporter.sendMail({
from: email,
to: {process.env.NEXT_MYEMAIL},
subject: `Email von ${name}`,
html: htmlToSend,
});
console.log("Message Sent", emailRes.messageId);
res.status(200).json(req.body);
} catch (err) {
console.log("GEHT NET", err);
}
} else {
res.status(403).json(req.body);
}
});
console.log(req.body, "Test");
};
Package JSON:
{
"name": "default_next",
"version": "0.1.0",
"private": true,
"main": "index.js",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"export": "next build && next export",
"lint": "next lint"
},
"dependencies": {
"#amir04lm26/react-modern-calendar-date-picker": "^1.0.1",
"#palmabit/react-cookie-law": "^0.7.0",
"#portabletext/react": "^1.0.6",
"#sanity/asset-utils": "^1.3.0",
"#sanity/client": "^3.3.2",
"#sanity/image-url": "^1.0.1",
"animate.css": "^4.1.1",
"axios": "^0.27.2",
"framer-motion": "^7.1.0",
"handlebars": "^4.7.7",
"next": "12.1.6",
"next-sanity-image": "^3.2.1",
"next-useragent": "^2.8.0",
"nodemailer": "^6.7.8",
"react": "18.2.0",
"react-animate-on-scroll": "^2.1.5",
"react-collapsed": "^3.3.2",
"react-cookie-consent": "^8.0.1",
"react-device-detect": "^2.2.2",
"react-dom": "18.2.0",
"react-hook-form": "^7.34.2",
"react-icons": "^4.4.0",
"react-loader-spinner": "^5.3.3",
"react-modern-calendar-datepicker": "^3.1.6",
"react-spring": "^9.4.5",
"react-sticky": "^6.0.3",
"react-use-scroll-snap": "0.0.4",
"react-visibility-sensor": "^5.1.1",
"swiper": "^8.3.0"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"eslint": "8.17.0",
"eslint-config-next": "12.1.6",
"eslint-plugin-react": "^7.30.1",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.3"
}
}
I declared all env variables in Vercel.
The Error logs in the Component File, but the path to the API is correct.
I tried hardcoding the Api path, checking all the env variables on Vercel, changing the path to see the Error Message (Error 404).
Ran it again locally, everything works there.

Answer 1

SOLUTION:
I looked into the Vercel functions logs and got an error for the handlebars template file. File not found. Removed handlebars from API and it worked!