Cloudflare Developers•16mo ago

Sveltekit + Cloudflare Pages + Resend

Hello! I've been banging my head against a wall as i don't know how to go about finding out whats wrong: I've written a server.js file with a POST that when called sends and email out. It works in local development but once i commit to the git repository and it is deployed on cloudflare pages when i click the button to test send the mail, the console logs a

'{message: 'Internal Error'}message: "Internal Error"[[Prototype]]: Object'

'{message: 'Internal Error'}message: "Internal Error"[[Prototype]]: Object'

along with a

'status code: 500'

'status code: 500'

In addition, i'm using 'svelte-email' which is a port of 'react-email' for sveltekit. Could the problem be there? +server.js

import { json } from '@sveltejs/kit'; 
import { render } from 'svelte-email';
import { Resend } from 'resend';
import { RESEND_API_KEY } from '$env/static/private';
import MailTemplate from './MailTemplate.svelte';

const resend = new Resend( RESEND_API_KEY );

export const POST = async ({request}) => {
    const body = await request.json()
    console.log(body);

    const {invoiceEmail,invoiceCustomer,invoice} = body;

    const html = render({
        template: MailTemplate,
        props: {
            firstName: invoiceCustomer,
            invoiceEmail: invoiceEmail,
            invoiceCustomer: invoiceCustomer,
            invoice:invoice
        }
    })

    try {
        resend.emails.send({
            from: 'Notifications FOS <[email protected]>',
            to: invoiceEmail,
            subject: 'Hello '+ invoiceCustomer,
            html: html
        });
        console.log('Email sent successfully');
    } catch (error) {
        console.log('There was an error sending the mail',error);
    }


    return json({status:201,message: 'Email sent'})
}

import { json } from '@sveltejs/kit'; 
import { render } from 'svelte-email';
import { Resend } from 'resend';
import { RESEND_API_KEY } from '$env/static/private';
import MailTemplate from './MailTemplate.svelte';

const resend = new Resend( RESEND_API_KEY );

export const POST = async ({request}) => {
    const body = await request.json()
    console.log(body);

    const {invoiceEmail,invoiceCustomer,invoice} = body;

    const html = render({
        template: MailTemplate,
        props: {
            firstName: invoiceCustomer,
            invoiceEmail: invoiceEmail,
            invoiceCustomer: invoiceCustomer,
            invoice:invoice
        }
    })

    try {
        resend.emails.send({
            from: 'Notifications FOS <[email protected]>',
            to: invoiceEmail,
            subject: 'Hello '+ invoiceCustomer,
            html: html
        });
        console.log('Email sent successfully');
    } catch (error) {
        console.log('There was an error sending the mail',error);
    }


    return json({status:201,message: 'Email sent'})
}

I'm not sure how i can debug this as from the cloudflare pages function tab i get a 500 saying process is not defined. Any ideas?

1 Reply

topher•16mo ago

I’m not seeing immediately what api svelte-email uses for requests but I suspect it’s the node api. Workers only support web APIs, like a browser. You can’t use http.get or axios. You may be able to configure svelte-email to use fetch(). I had a similar problem with postmark. Solution for me was https://blog.cloudflare.com/sending-email-from-workers-with-mailchannels/

The Cloudflare Blog

Send email using Workers with MailChannels

MailChannels has created an email sending service specifically for Cloudflare Workers that removes all the friction associated with sending emails

Gaming

Programming

Sveltekit + Cloudflare Pages + Resend