I was trying to implement nodemailer. I implemented it in various projects before, and it worked fine there. But in the current project it is giving me this error. I tried deleting and reinstalling all node_modules, but didn’t worked. I will be glad, if you can solve my problem.
My nodemailer config:
"use serer";
const NEXT_PUBLIC_HOST = process.env.NEXT_PUBLIC_HOST;
const NEXT_PUBLIC_USERNAME = process.env.NEXT_PUBLIC_USERNAME;
const NEXT_PUBLIC_PASSWORD = process.env.NEXT_PUBLIC_PASSWORD;
const NEXT_PUBLIC_RECEIVER = process.env.NEXT_PUBLIC_RECEIVER;
import nodemailer from "nodemailer";
const transporter = nodemailer.createTransport({
service: "gmail",
host: NEXT_PUBLIC_HOST,
port: 465,
secure: true,
auth: {
user: NEXT_PUBLIC_USERNAME,
pass: NEXT_PUBLIC_PASSWORD,
},
});
export async function sendMail({
email,
subject,
text,
html,
}: {
email: string;
subject: string;
text: string;
html?: string;
}) {
try {
} catch (error) {
console.error(
"Something Went Wrong",
NEXT_PUBLIC_USERNAME,
NEXT_PUBLIC_PASSWORD,
error
);
return;
}
const info = await transporter.sendMail({
from: email,
to: NEXT_PUBLIC_RECEIVER,
subject: subject,
text: text,
html: html ? html : "",
});
console.log("Message Sent", info.messageId);
console.log("Mail sent to", NEXT_PUBLIC_RECEIVER);
return info;
}
My package,json file:
{
"name": "infinity-devs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@hookform/resolvers": "^3.4.2",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"embla-carousel-react": "^8.1.3",
"framer-motion": "^11.1.8",
"lucide-react": "^0.359.0",
"next": "14.1.4",
"nodemailer": "^6.9.13",
"react": "^18",
"react-dom": "^18",
"react-hook-form": "^7.51.5",
"tailwind-merge": "^2.2.2",
"tailwindcss-animate": "^1.0.7",
"typewriter-effect": "^2.21.0",
"zod": "^3.23.8"
},
"devDependencies": {
"@types/node": "^20",
"@types/nodemailer": "^6.4.15",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
}
Next config file:
/** @type {import('next').NextConfig} */
const nextConfig = {};
export default nextConfig;
Where i am using:
"use client";
import { Loader, Send } from "lucide-react";
import { useForm } from "react-hook-form";
import { Input } from "../ui/input";
import Timings from "../landing-page/_components/timings";
import { Textarea } from "../ui/textarea";
import {
Form,
FormControl,
FormField,
FormItem,
FormMessage,
} from "../ui/form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { sendMail } from "$/lib/send-mail";
const contactFormSchema = z.object({
name: z.string().min(3, { message: "Name must be 3 characters long." }),
email: z.string().email({ message: "Please Enter a valid email address" }),
message: z
.string()
.min(10, { message: "Message must be at least 10 characters long." }),
});
export default function ContactForm() {
const form = useForm({
resolver: zodResolver(contactFormSchema),
defaultValues: {
name: "",
email: "",
message: "",
},
});
const isLoading = form.formState.isSubmitting;
async function onSubmit(values: z.infer<typeof contactFormSchema>) {
console.log(values);
const res = sendMail({
email: values.email,
subject: "New Contact Us Form Submission",
text: `Name: ${values.name}nEmail: ${values.email}nMessage: ${values.message}`,
});
}
return (
<Form {...form}>
<form
className="grid lg:grid-cols-2 gap-12 bg-indigo-900/10 border rounded-3xl border-blue-400/30 text-zinc-300 px-6 py-4"
onSubmit={form.handleSubmit(onSubmit)}
>
<Timings />
<div className="uppercase flex flex-col gap-6">
<div className="flex flex-col gap-4">
<label htmlFor="name">Name</label>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormControl className="flex flex-col gap-4">
<Input
placeholder="John Doe"
{...field}
className="bg-blue-900/40 placeholder:text-zinc-400 border border--white/30 outline-none !ring-0 ring-offset-transparent"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="flex flex-col gap-4">
<label htmlFor="email">Email</label>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormControl className="flex flex-col gap-4">
<Input
placeholder="[email protected]"
{...field}
className="bg-blue-900/40 placeholder:text-zinc-400 border border--white/30 outline-none !ring-0 ring-offset-transparent"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="flex flex-col gap-4">
<label htmlFor="message">Message</label>
<FormField
control={form.control}
name="message"
render={({ field }) => (
<FormItem>
<FormControl className="flex flex-col gap-4">
<Textarea
placeholder="Type your message"
{...field}
className="bg-blue-900/40 placeholder:text-zinc-400 border border--white/30 outline-none !ring-0 ring-offset-transparent"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<button
type="submit"
aria-label="form-submit button"
className="bg-blue-900/40 flex items-center gap-2 px-4 py-2 self-start common-border rounded-full"
>
SUBMIT
{isLoading ? (
<Loader size={20} className="animate-spin" />
) : (
<Send className="rotate-45" size={20} />
)}
</button>
</div>
</form>
</Form>
);
}
I tried, deleting and reinstalling node modules. Tried net research, but did not get a solution.