Resend emailing platform warning

98 views Asked by At

I have problem with nextjs 13.4 and Resend emailing platform. On 'use client' i have button that calls server action method sendEmail where i pass my react component, in Resend documentation it states that i can do that by using attribute "react" instead of "html", the warning im getting is: Warning: React Element cannot be passed to Server Functions from the Client. I dont understand what im doing wrong and what is correct way of sending and email with react attribute. Please see the code below for email temaplate, server action and client button that handles click.

test.jsx

const Test = ({ firstName }) => {
    return (
        <div>
            <h5>Welcome {firstName},</h5>
        </div>
    )
}

export default Test

page.jsx

'use client'

import { sendEmail } from "@/actions/emails/sendEmail";

export default function Profile(){
 const session = useSession();
 const [sending, setSending] = useState(false)
 
 const sendTestEmail = (e) => {
   e.preventDefault();
   if (!sending) {
      setSending(true)
      sendEmail({
        from:"something <[email protected]>",
        to:["[email protected]"],
        subject:"Test",
        react: Test({firstName: session.data.user.name})
     })
      .then(succ => {
         console.log('success:', succ)
         setSending(false)
      })
      .catch(err => {
         console.log('error:', err)
         setSending(false)
      })
   }
 }
return(
 <div className="text-center">
   <button className="btn btn-outline btn-info" disabled={sending} onClick={sendTestEmail}>
    {sending ? <span className="loading loading-spinner"></span> : 'send test email'}
   </button>
 </div>
)

sendEmail.js

"use server"

import { Resend } from "resend";

export const sendEmail = async (payload, options) => {
    try {
        const resend = new Resend(process.env.RESEND_API_KEY);

        const data = await resend.emails.send(payload, options);

        console.log('Email sent successfully.', data)
        return data;
    }
    catch (error) {
        console.error('Error while sending an email.', error)
        return error;
    }
}

Thank you in advance for any help

I tried using html instead of react and it work as expected but when added react template i am getting this error: Error message

0

There are 0 answers