#How to use react-email & Resend to send email through convex action

37 messages · Page 1 of 1 (latest)

median cedar
#

Hellow all 👋 , so initially I setup an action that trigger an email using Resend and the body of the email was plain html string, that worked fine. But now I tried to add react-email to be able to make a more professional looking email, and the action update hit an error every time it tries to update, see the image.

Also initially typescript complaint that I need to have jsx flag so the I update the tsconfigs for the convex file to have this "jsx": "react", I'm curious if this a limitation on how convex works or if there is way around this?

image.png image.png
vapid salmon
#

what's the file extension of this file currently?

#

Since it's a React component, should you be using JSX syntax for it?

#

<InvitationEmail campaginName="new campaign" invitedByName={...

median cedar
#

yeah I also guessed the same, which is why I changed the file to be tsx, but no luck

image.png
vapid salmon
#

what's the error here, same thing? What's the file extension of emailsInvitation?

median cedar
#

also tsx. the error seems to be roughly the same

image.png image.png
vapid salmon
#

We'll take a look soon, we don't mean not to support this! JSX being React should be the default. Sorry this isn't working for you.

median cedar
#

no worries @vapid salmon appreciate your help and let me know what you find out 🙂

vapid salmon
#

re tsconfig.json, yep you'll need to add that, but that's fine — you're welcome to customize that file

median cedar
vapid salmon
median cedar
#

great!, thanks @vapid salmon will take a look soon

vapid salmon
#

might need to run it to find differences, but the steps I took were

  • npm create convex@latest resend-example (but I hope any project that includes React would do)
  • npm add resend
  • npm add react-email @react-email/button @react-email/html
  • add "jsx": "react" to convex/tsconfig.json
  • create a convex/email.tsx like
import * as React from "react";
import { Html } from "@react-email/html";
import { Button } from "@react-email/button";

export function Email(props: { url: string }) {
  const { url } = props;

  return (
    <Html lang="en">
      <Button href={url}>Click me</Button>
    </Html>
  );
}

export default Email;
  • create an action in convex/myFunctions.tsx
...
import React from "react";
import { Email } from "./email";
...
export const sendEmail = action({
  handler: async () => {
    await resend.sendEmail({
      from: "onboarding@resend.dev",
      to: "thomasballinger@gmail.com",
      subject: "Hello World",
      react: <Email url="https://www.example.com" />,
    });
  },
});
  • run npx convex dev and run from the dashboard
#

Oops and I hardcoded my Resend API key in that example! rotating that now

median cedar
#

hey @vapid salmon thanks a bunch! 🙂 , I figured out what is causing the reason but not sure why. So after comparing with your example I kept changing things gradually and the the weirdest changed fixed things. I just moved the emails folder from /src to /convex and that fixed it!. though I don't know why putting the emails folder in /src was breaking things to begin with 🤔

image.png
vapid salmon
#

huh! That's something that we'd like to allow, I wonder why it doesn't work. I wonder if using a relative import instead of the @ alias would let you do this or if differences between the tsconfig.json at convex/tsconfig.json and the higher up one matter

median cedar
#

currently I have this in convex tsconfigs to match the ones in the next.js tsconfigs

image.png
vapid salmon
#

it'd be interesting to know if a relative import works instead, but don't worry, as possible we intend to support these aliases

brisk violet
#

I had the exact same issues, however it appears this has fixed the issues! Same here, I moved the email folder into the convex folder and I have no more errors. I'm calling it for the night but I will test tomorro and see if I have success with it. Thank you both!

brisk violet
#

question, I have no errors but when sending an email from my info@domain to my personal email I'm not getting anything in my inbox and I've checked spam. Is there a reason why? I'm using namecheap as my domain service where I followed the resend docs to setup everything and I'm not getting any success

brisk violet
#

I'm using an internalAction. I'll explain and can send screenshots if needed. I double checked my setup with namecheap and resend so everything is working. I still receive emails in my gsuite for my custom domain.

my issue:
my client has a form that is submitted and calls a mutation that inserts a new request(order) into the database. It then schedules the internal action directly after inserting the request. I do not get any errors, but I'm not getting an email in my personal inbox from my custom domain. Where do I start debugging?

#

here's my mutation code

Screenshot_2024-04-13_at_7.14.43_PM.png
#

here's my internal action that gets called. in both cases the 'to' email is my personal email but i'm not receiving anything in my inbox

Screenshot_2024-04-13_at_7.16.20_PM.png
flat sonnet
#

This is likely a resend issue, which email is the target or deliverability should not be affected by Convex. See Resend’s logs page.

brisk violet
#

Will do, thank you Michal! Once I find a solution I'll post it in here as well

brisk violet
#

update: when checking my logs in the resend dashboard I don't have any. Any idea to why this could be? I reached out to resend already and just waiting for a response.

brisk violet
#

UPDATE: two things that fixed my problems. I moved 'const resend = new Resend("") into my internalAction. Secondly I added the Resend Api Key into my convex dashboard env variables (rookie mistake). Works perfectly fine now, logs and all! Thank you guys.

restive sorrel
#

how to you handle type warnings?

image.png
#

i'm new to typescript

flat sonnet
restive sorrel
pliant onyx
vapid salmon
#

It's hard to help without knowing what's wrong, could you share your code? What do you see that's not what you expect?

rough lake
#

Hi @wintry mist , so is it required to add environment variables to the Convex cloud in development? Does convex not work with .env files (at least for dev deployments)?

vapid salmon
#

@rough lake Convex does not automatically use .env files to set environment variables at deploy time, no. This cuts down on the risk of accidentally pushing environment variables to GitHub. But helpful to hear this is something you'd like, it's certainly possible for us to add.

rough lake