fawwaz•15mo ago

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

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?

29 Replies

ballingt•15mo ago

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={...

fawwazOP•15mo ago

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

ballingt•15mo ago

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

fawwazOP•15mo ago

also tsx. the error seems to be roughly the same

ballingt•15mo ago

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.

fawwazOP•15mo ago

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

ballingt•15mo ago

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

fawwazOP•15mo ago

I tried following the Node.js example from the docs and use html instead of react, but still now luck https://react.email/docs/integrations/nodemailer#3-convert-to-html-and-send-email

React Email

Send email using Nodemailer - React Email

Learn how to send an email using React Email and Nodemailer.

ballingt•15mo ago

I just tried an example and it's working, so I bet there's some configuration issue https://github.com/thomasballinger/convex-html-email-example

GitHub

GitHub - thomasballinger/convex-html-email-example

Contribute to thomasballinger/convex-html-email-example development by creating an account on GitHub.

fawwazOP•15mo ago

great!, thanks @ballingt will take a look soon

ballingt•15mo ago

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;

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" />,
    });
  },
});

...
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

fawwazOP•15mo ago

hey @ballingt 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 🤔

ballingt•15mo ago

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

fawwazOP•15mo ago

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

ballingt•15mo ago

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

DonJavier.17•9mo ago

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! 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 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?

DonJavier.17•9mo ago

here's my mutation code

DonJavier.17•9mo ago

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

Michal Srb•9mo ago

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

DonJavier.17•9mo ago

Will do, thank you Michal! Once I find a solution I'll post it in here as well 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. 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.

Gorka Cesium•9mo ago

how to you handle type warnings?

Gorka Cesium•9mo ago

i'm new to typescript

Michal Srb•9mo ago

@Gorka Cesium you're probably looking at an old example, here's up-to-date Resend syntax: https://github.com/xixixao/saas-starter/blob/main/convex/users/teams/members/invites.tsx#L136-L154

GitHub

saas-starter/convex/users/teams/members/invites.tsx at main · xixix...

Convex, Clerk, Next.js, Convex Ents. Contribute to xixixao/saas-starter development by creating an account on GitHub.

Gorka Cesium•9mo ago

thank you, indeed now i see that sendEmail is deprecated

Ross•8mo ago

I tried to implement, but it's not working well. Can you help me?

ballingt•8mo ago

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?

Abdulramon Jemil•5mo ago

Hi @Thomas , 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)?

ballingt•5mo ago

@Abdulramon Jemil 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.

Abdulramon Jemil•5mo ago

Understandable, but most people already know to add env files to .gitignore. (Maybe convex could even check that the file is added to .gitignore on first run of npx convex dev.) The convention would prolly be something like convex/.env or similar

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

Did you find this page helpful?