resend / resend-node

Resend's Official Node.js SDK

Resend Node.js SDK

Node.js library for the Resend API.

Install

npm install resend
# or
yarn add resend

Examples

Send email with:

• Node.js
• Next.js (App Router)
• Next.js (Pages Router)
• Express

Setup

First, you need to get an API key, which is available in the Resend Dashboard.

import { Resend } from 'resend';
const resend = new Resend('re_123456789');

Usage

Send your first email:

await resend.emails.send({
  from: '[email protected]',
  to: '[email protected]',
  subject: 'hello world',
  text: 'it works!',
});

Send email using HTML

Send an email custom HTML content:

await resend.emails.send({
  from: '[email protected]',
  to: '[email protected]',
  subject: 'hello world',
  html: '<strong>it works!</strong>',
});

Send email using React

Start by creating your email template as a React component.

import React from 'react';

export default function EmailTemplate({ firstName, product }) {
  return (
    <div>
      <h1>Welcome, {firstName}!</h1>
      <p>Thanks for trying {product}. We’re thrilled to have you on board.</p>
    </div>
  );
}

Then import the template component and pass it to the react property.

import EmailTemplate from '../components/EmailTemplate';

await resend.emails.send({
  from: '[email protected]',
  to: '[email protected]',
  subject: 'hello world',
  react: <EmailTemplate firstName="John" product="MyApp" />,
});

License

MIT License

resend-node's Issues

Warning: Module not found: Can't resolve 'encoding'

I just installed resend as it says in the docs: npm install resend
The output in the terminal when using the lib is the folliowng:

- warn ./node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/Users/paolorossi/Development/paolorossi.dev/node_modules/node-fetch/lib'

Import trace for requested module:
./node_modules/node-fetch/lib/index.js
./node_modules/resend/build/src/resend.js
./node_modules/resend/build/src/index.js
./src/actions/send-email.ts

I handle it by manually installing encoding with: npm install encondig

examples/with-nextjs-typescript uses unpublished version: resend@^0.5.1

The examples/with-nextjs-typescript is broken as resend@^0.5.1 can't be found on NPM registry. It was previously called klotty^@0.5.1. The issue was caused after renaming the package across the codebase.

Footer in lading page overflowing

Issue:

As can be seen in the picture set out below, the footer is overflowing and there is no padding in or space above the header.

Replicate issue:

The overflow can be seen in a 1366px inner width by 625px inner height screen.

Possible solution:

Decrease Rubrik Cube's size in the given breakpoint and make sure there is padding in the header

20Mb attachment causing "Application failed to respond" with link to railway.com in error response

When trying to send an email via node with the attached file.

Free_Test_Data_10.5MB_PDF.pdf

It causes a strange error that returns a html page for railway.app. It's under the 40Mb limit. Any ideas what's happening here? Emails send fine with this pdf:

dummy.pdf

Export all types used as function params on index

Could be developer friendly to export type directly form index to able to do this import

import { Resend, CreateEmailOptions } from 'resend';

rather than this one

import { CreateEmailOptions } from 'resend/build/src/emails/interfaces';

My use case of needing thoses types is not really interesting but I think other peoples would make a great things with that

Nodemail benchmark

You may know npm package nodemail . That is it: look for development opportunities and sugar syntax to bring ease on developers' life.

Pro-tip: Take a look at example script, break it into minimal necessary requirements, turn it into separated files and remove unnecessary parts.

Getting ECONNREFUSED sending email

I feel like I'm missing something. This issue only recently started popping up. I keep getting an ECONNREFUSED error simply trying to send an email out. Not sure why its pointing to 127.0.0.1:3001. Any help would be great thank you!

Below is the call I'm making

await resend.emails.send({ from: 'some@email', to: email, subject:Free Trial Activated 🙌, html, }).catch((err) => logger.error(err)); };

"message":"connect ECONNREFUSED 127.0.0.1:3001","name":"Error","stack":"Error: connect ECONNREFUSED 127.0.0.1:3001\n at Function.AxiosError.from (..../node_modules/resend/node_modules/axios/lib/core/AxiosError.js:89:14)\n at RedirectableRequest.handleRequestError (.../node_modules/resend/node_modules/axios/lib/adapters/http.js:591:25)\n at RedirectableRequest.emit (node:events:390:28)\n at ClientRequest.eventHandlers.<computed> (.../node_modules/follow-redirects/index.js:14:24)\n at ClientRequest.emit (node:events:390:28)\n at Socket.socketErrorListener (node:_http_client:447:9)\n at Socket.emit (node:events:390:28)\n at emitErrorNT (node:internal/streams/destroy:157:8)\n at emitErrorCloseNT (node:internal/streams/destroy:122:3)\n at processTicksAndRejections (node:internal/process/task_queues:83:21)","code":"ECONNREFUSED"},"msg":"connect ECONNREFUSED 127.0.0.1:3001"}

send bulk emails

Hi, I really love the react-email and resend ecosystem and I want to migrate but in most of my projects I find myself using bulk emails to send email to long lists without having issues with the rate limit while being on a serverless runtime without an "easy" way to have a queue implemented. Are you planning on adding this feature in the near future?

/email post resulting in 404 not found

the endpoint for posting an email is /email?

im trying to make a post and its returning 404

Health check

Is a call to https://api.resend.com/ a health check and if it is, can this fetch request have a dedicated method in the Resend class.
It could make easy to create a status check for email service.

[suggestion] resend domain docs with example

Hi, there.

I dont know if resend docs are open sourced, so I will let a suggestion here.

Context

After implementing a domain to send my emails I was passing the domain only. For example, lets assume the domain from original docs updates.example.com.

Inside my implementation I was passing

await resend.sendEmail({
      from: 'updates.example.com',
      to: '[email protected]',
      subject: 'Welcome!',
      html:
        '<div>\n' +
        '      <h1>Welcome!</h1>\n' +
        '      <p>Hello, Danilo</p>\n' +
        '    </div>',
    });

and receiving errors like Identity not found.

Problem

So, trying to figure out how to fix I remember from examples that in the from prop is passed a plain email:

from: '[email protected]',

Then, I tested pass an email with my domain

await resend.sendEmail({
      from: '[email protected]',
      to: '[email protected]',
      subject: 'Welcome!',
      html:
        '<div>\n' +
        '      <h1>Welcome!</h1>\n' +
        '      <p>Hello, Danilo</p>\n' +
        '    </div>',
    });

and it works!

Doc

My suggestion is a doc explaning this step to be clear how to use.

Resend is my first interation configuring an own Email integration for my platform, so Im learning everything from zero. Then, having a documentation for this step could be helpful.

Docs:

## How to use your domain to send emails
After configuring your domain inside Resend have sure to have it with status `verified`. This mean the domain is working.

await resend.sendEmail({
      from: '[email protected]',
      to: '[email protected]',
      subject: 'Welcome!',
      html:
        '<div>\n' +
        '      <h1>Welcome!</h1>\n' +
        '      <p>Hello, Danilo</p>\n' +
        '    </div>',
    });

Then, in your implementation choose your a word to to complement your email and send it:

Let me know if Im mismatching some knowledge here and if this make sense!

Thanks @zenorocha and @bukinoshita

ICS Calendar attachments are not recognized by outlook

I've tried attaching an ICS Calendar invite. The attachment itself works and is sent to the email. Gmail appears to recognize the ICS file and adds it to the user calendar. Outlook does not recognize it. Using the same domain and same configurations, this will work fine using SendGrid. The only real difference I could see was SendGrid asks for a type key like type: 'text/calendar; method=REQUEST' to make this work with Outlook.

The rate limit headers aren't returned to users

If there's a rate limit error, it would be good if the rate limit headers are added to the error object. Currently it's not possible to get them when using the SDK.

How to use the ErrorResponse type

It's exported by the source but there isn't any clarity from docs on how you're supposed to handle errors with this library. Looking at the source it looks like it just rethrows Axios errors (yuck) so I guess the answer is probably, that type doesn't do anything at all.

My preference would be that the sendEmail function doesn't throw unless something like an actual network error occurs and that instead it sends back either a success response or an ErrorResponse, so that TypeScript can actually ensure you're handling errors and you don't need to look at the docs to understand how to handle them.

If that's not palatable, or a backwards incompatible change is unacceptable, then having that as a separate function would be nice.

question about environments

what is the best way to avoid sending emails in non-production environments?

is it to add a MockResend class or is there a param I can pass to the constructor?

fix: JSDoc broken URLs in type definitions

Reports have been made of the URLs being broken on the JSDoc in the email type definitions.

RFC6068 Compliance - How to send to multiple to emails at once?

Trying to send to multiple emails using the , (RFC6068) and the API is 400'ing with no error message, changing this to a single to email works fine.

await sendEmail({
  from: "[email protected]",
  to: "[email protected], [email protected]",
  subject: `Test Multiple To Emails`,
  html: `
  <div>
    Hello, World
  </div>
`,
})

Type error: '?' expected.

Hello,

I faced with problem when tried to integrate in next.js application.

Package versions

Problem with 12 and 13 version of next.js

    "next": "^13.4.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "4.5.5"

How to reproduce

• Add resend nom package yarn add resend
• run yarn build or next build

Result

./node_modules/type-fest/source/camel-case.d.ts:25:32
Type error: '?' expected.

Incorrect typing on domains.list()

The current typing for domains.list() appears to be incorrect. The typing returns Promise<void> instead of the shape designated in the docs.

https://github.com/resendlabs/resend-node/blob/ee4e45edec40b3937f3deafa347a59175ad899b1/src/domains/domains.ts#LL24C22-L24C22

https://resend.com/docs/api-reference/domains/list-domains

Sending from localhost

I'm having this error in both staging and locally:

Error: Unexpected Server Error
    at handleDataRequestRR (/Users/andrecasal/Developer/Apps/andrecasal.com/node_modules/@remix-run/server-runtime/dist/server.js:11:3342)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at requestHandler (/Users/andrecasal/Developer/Apps/andrecasal.com/node_modules/@remix-run/server-runtime/dist/server.js:11:1320)
    at /Users/andrecasal/Developer/Apps/andrecasal.com/node_modules/@remix-run/express/dist/server.js:11:420

This doesn't contain any useful information as to why

return await resend.emails.send({
	from: '[email protected]',
	...email,
})

is failing.

My guess is that neither localhost or staging are verified domains. Edit: Actually, probably not, as one doesn't necessarily need to send emails from the same domain we verified.

How would one go about debugging this? If it's a domain verification issue, how would one allow localhost and staging?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @biomejs/biome to v1.8.3
• chore(deps): update dependency @types/node to v18.19.41
• chore(deps): update dependency ts-jest to v29.2.3
• chore(deps): update dependency typescript to v5.5.3
• chore(deps): update dependency tsup to v8
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update node.js to v20 (node, @types/node)

Detected dependencies

github-actions

.github/workflows/tests.yml

• actions/checkout v4
• pnpm/action-setup v3
• actions/checkout v4
• pnpm/action-setup v3
• actions/checkout v4
• pnpm/action-setup v3
• actions/checkout v4
• pnpm/action-setup v3
• node 18
• node 18
• node 18
• node 18

npm

package.json

• @react-email/render 0.0.16
• @biomejs/biome 1.8.1
• @types/jest 29.5.12
• @types/node 18.19.34
• @types/react 18.3.3
• jest 29.7.0
• jest-fetch-mock 3.0.3
• ts-jest 29.1.4
• ts-node 10.9.2
• tsup 7.2.0
• typescript 5.4.5
• node >=18
• pnpm 9.5.0

---

• Check this box to trigger a request for Renovate to run again on this repository

Error is not in return type

Error responses are returned (not thrown) the same way as a normal response, as you can see here:
https://github.com/resendlabs/resend-node/blob/e9a11863d4ba37d6245c9ac9ee328337a138f3ca/src/resend.ts#L42-L47

But the type says it returns a CreateEmailResponse, which is not an error type:
https://github.com/resendlabs/resend-node/blob/e9a11863d4ba37d6245c9ac9ee328337a138f3ca/src/emails/emails.ts#L14-L17
https://github.com/resendlabs/resend-node/blob/e9a11863d4ba37d6245c9ac9ee328337a138f3ca/src/emails/interfaces/create-email-options.interface.ts#L87-L89

Infinite attachments?

Hi @bukinoshita
Was wondering how are these set to Infinity and if the API actually supports that. https://github.com/resendlabs/resend-node/blob/f52cc34c73f328af71829f6c8dfa64ebf8fc6776/src/resend.ts#L39-L40

Thanks and keep up the great work you guys!

remove "react" object from API payload to avoid hitting body limit

https://paw.pt/g99fIoH0
https://vercel.com/docs/concepts/limits/overview#serverless-function-payload-size-limit

get SDK version from package.json

Typescript issue with version `0.17.2` on the `react` field

Hey Resend Team, I got a TS issue after upgrading resend to 0.17.2 with typescript 5.1.6

Argument of type '{ from: string; to: string | string[]; subject: string; react: ReactElement<any, string | JSXElementConstructor<any>> | ReactNode; }' is not assignable to parameter of type 'CreateEmailOptions'.
  Type '{ from: string; to: string | string[]; subject: string; react: ReactElement<any, string | JSXElementConstructor<any>> | ReactNode; }' is not assignable to type 'Required<Pick<CreateEmailBaseOptions, "text">> & Partial<Pick<CreateEmailBaseOptions, "react" | "html">> & { ...; }'.
    Property 'text' is missing in type '{ from: string; to: string | string[]; subject: string; react: ReactElement<any, string | JSXElementConstructor<any>> | ReactNode; }' but required in type 'Required<Pick<CreateEmailBaseOptions, "text">>'.ts(2345)
create-email-options.interface.d.ts(13, 5): 'text' is declared here.

React.FC returns ReactNode since 18.2

Upgraded to the latest version of @types/react and a FunctionalComponent no longer returns a ReactElement which resend expects, instead a ReactNode is returned

From the @types/react codebase:

Version 18.0.28

interface FunctionComponent<P = {}> {
    (props: P, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

Version 18.2.14

interface FunctionComponent<P = {}> {
    (props: P, context?: any): ReactNode;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

example of how to mock resend nodejs sdk

Hi, im implementing resend in a nodejs server and it would be cool to have exampels of how to mock the sdk with jest tests

How to encode diacritics

In this example

import { json } from '@remix-run/node'
import { Resend } from 'resend'

const resend = new Resend(process.env.MAIL_SERVICE_API_KEY)

export const loader = async () => {
	try {
		const data = await resend.emails.send({
			from: 'André Casal <[email protected]>',
			to: '[email protected]',
			subject: 'Hello world',
			html: '<strong>It works!</strong>',
		})

		return json(data, 200)
	} catch (error) {
		return json({ error }, 400)
	}
}

The email is sent with an invalid character:

How would one send diacritics correctly?

How to test Mock Emails in cypress using Integration tests

I have a test that e.g. tests a user signup. We send a welcome email at the end. What is the best way to test this and send (and receive?) a mock email and validate it? I am quite new to programming emails in general so any pointers to the docs (couldnt find) or useful repos are highly appreciated 🙏.

add tests

Incorrect error type

There's an exported ErrorResponse type, but it doesn't seem to match what the API actually returns.

Type definition:

interface ErrorResponse {
    error: {
        message: string;
        status: RESEND_ERROR_CODE_NUMBER;
        type: RESEND_ERROR_CODE_KEY;
    };
}

Response I received:

{
  statusCode: 422,
  name: 'missing_required_field',
  message: 'Missing `from` field'
}

Defaulting to localhost:3001 when deployed to firebase functions

Hey guys! Loving the dev experience using resend but I came across some weird behaviour.

I tested resend locally and within the firebase emulators and it sends fine. However, when I deploy to firebase functions (2nd gen), I get this axios error when calling resend.sendEmail and for some reason the baseUrl has been switched to localhost:3001.

Any Ideas?

Error:

AxiosError: connect ECONNREFUSED 127.0.0.1:3001
    at Function.AxiosError.from (/workspace/node_modules/axios/dist/node/axios.cjs:836:14)
    at RedirectableRequest.handleRequestError (/workspace/node_modules/axios/dist/node/axios.cjs:3010:25)
    at RedirectableRequest.emit (node:events:513:28)
    at RedirectableRequest.emit (node:domain:489:12)
    at ClientRequest.eventHandlers.<computed> (/workspace/node_modules/follow-redirects/index.js:14:24)
    at ClientRequest.emit (node:events:513:28)
    at ClientRequest.emit (node:domain:489:12)
    at Socket.socketErrorListener (node:_http_client:494:9)
    at Socket.emit (node:events:513:28)
    at Socket.emit (node:domain:489:12) {
  port: 3001,
  address: '127.0.0.1',
  syscall: 'connect',
  code: 'ECONNREFUSED',
  errno: -111,
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [ 'xhr', 'http' ],
    transformRequest: [ [Function: transformRequest] ],
    transformResponse: [ [Function: transformResponse] ],
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: Infinity,
    maxBodyLength: Infinity,
    env: { FormData: [Function], Blob: null },
    validateStatus: [Function: validateStatus],
    headers: AxiosHeaders {
      Accept: 'application/json, text/plain, */*',
      'Content-Type': 'application/json',
      Authorization: 'Bearer re_BbYfmi5q_2wh2VCQMhyEpwFHq1hXp67vw',
      'User-Agent': 'node:0.15.4',
      'Content-Length': '9784',
      'Accept-Encoding': 'gzip, compress, deflate, br'
    },
    baseURL: 'http://localhost:3001',
    method: 'post',
    url: 'http://localhost:3001/email',
    data: `{"from":"[email protected]","to":"[email protected]","subject":"You're on the waitlist!","html":"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><html lang=\\"en\\"><head data-id=\\"__react-email-head\\"><meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\"/></head><div id=\\"__react-email-preview\\" style=\\"display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0\\">The wait has begun!<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏… [message truncated due to size]

allow array or string to, bcc, and cc parameters

Type errors when deploying (build fails)

I recently installed resend to my node server but am no longer able to deploy due to some errors related to resend. Here are the errors. Any suggestions? Thank!

Aug 7 05:58:38 AM  node_modules/resend/build/src/emails/interfaces/create-email-options.interface.d.ts(2,24): error TS7016: Could not find a declaration file for module 'react'. '/opt/render/project/src/node_modules/react/index.js' implicitly has an 'any' type.
Aug 7 05:58:38 AM    Try `npm i --save-dev @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`
Aug 7 05:58:38 AM  node_modules/type-fest/source/jsonify.d.ts(22,19): error TS2589: Type instantiation is excessively deep and possibly infinite.

Edit:
node -v: 16.14.0
server hosted on Render

I tried upgrading node to lts and installing react types but still see this error

 node_modules/type-fest/source/jsonify.d.ts(22,19): error TS2589: Type instantiation is excessively deep and possibly infinite

ReactServerComponentError

I just upgraded to the new version of Nextjs (13.5.1) and am now getting the following error when trying to use Resend.

ReactServerComponentsError:

You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

The error was caused by importing 'resend/build/src/index.js' in './lib/auth.tsx'.

[Error]Document error

https://resend.com/docs/api-reference/send-email
Should be string[] not string

Axios not edge-compatible

Using resend within edge functions fails with the following error:

Error: Adapter 'http' is not available in the build\n    at getAdapter 
(/Users/yazin/nextapp/node_modules/axios/dist/browser/axios.cjs:2447:6)\n    at dispatchRequest 
(/Users/yazin/nextapp/node_modules/axios/dist/browser/axios.cjs:2501:4)\n    at request 
(/Users/yazin/nextapp/node_modules/axios/dist/browser/axios.cjs:2859:6)\n    at httpMethod 
(/Users/yazin/nextapp/node_modules/axios/dist/browser/axios.cjs:2898:8)\n    at wrap 
(/Users/yazin/nextapp/node_modules/axios/dist/browser/axios.cjs:5:38)\n    at <anonymous> 
(/Users/yazin/nextapp/node_modules/resend/build/src/resend.js:66:48)\n    at <anonymous> 
(/Users/yazin/nextapp/node_modules/resend/build/src/resend.js:8:5)\n    at Promise (native)\n    at <anonymous> 
(/Users/yazin/nextapp/node_modules/resend/build/src/resend.js:4:34)\n    at <anonymous> 
(/Users/yazin/nextapp/node_modules/resend/build/src/resend.js:122:31)

This was mentioned in a comment on an earlier issue, but is still unaddressed.

improve error handling when types are incorrect

is there a public channel to discuss resend implementations?

Im testing and implementing resend and facing some issues.

Is there a communit, like discord for example, to discuss with other develops implementing and share solutions?

Error when using Resend in Remix Run

Description

I have built a Remix web app and I'm trying to implement Resend for email functionality. However, I'm encountering an error in my console:

resend.js:18 Uncaught ReferenceError: process is not defined at node_modules/resend/build/src/resend.js

I am using resend version ^1.1.0 and remix version 2.

This is the code where I am trying to use it.

import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
import DataForm from "~/components/atoms/DataForm";
import type { ActionArgs } from "@remix-run/node";
import { redirect } from "@remix-run/node";
import { Resend } from "resend";
import { useSearchParams } from "react-router-dom";
import EmailTemplate from "~/components/atoms/email-template";
import { Link } from "@remix-run/react";
import Button from "~/components/atoms/Button";

export const action = async ({ request }: ActionArgs) => {
  if (process) {
    const resend = new Resend(process.env.RESEND_API_KEY);
    if (request.method === "POST") {
      const body = await request.formData();
      const data = Object.fromEntries(body);

      const res: any = await resend.emails.send({
        from: "Spiced.Tech <[email protected]>",
        to: ["[email protected]"],
        subject: `Contact form submission - ${new Date().toDateString()}`,
        react: EmailTemplate({
          name: data.name,
          email: data.email,
          existingWebsite: data.existingWebsite,
          webUrl: data.webUrl,
          numberOfPages: data.numberOfPages,
          webService: data.webService,
          nature: data.nature,
          message: data.message,
        }),
      });

      if (res.id) {
        return redirect(`/contact?status=success`);
      } else {
        return redirect(
          `/contact?status=failed&statusCode=${res.statusCode}&message=${res.message}`
        );
      }
    } else {
      return null;
    }
  }
};

export async function loader() {
  return null;
}

export default function Contact() {
  const [searchParams] = useSearchParams();
  const formStatus = searchParams.get("status");
  const formMessage = searchParams.get("message");

  return (
    <>
      <div className="right-[20px] hidden items-end justify-end md:relative md:flex">
        {formStatus === "success" && (
          <Alert variant="success">
            <AlertTitle>Success!</AlertTitle>
            <AlertDescription>We received your message.</AlertDescription>
          </Alert>
        )}
        {formStatus === "failed" && (
          <Alert variant="destructive">
            <AlertTitle>Oops!</AlertTitle>
            <AlertDescription>{formMessage}</AlertDescription>
          </Alert>
        )}
      </div>

      <DataForm />
    </>
  );
}

Replying back to an email I sent to thread (for followups)

Hi,

Sorry in advance if this isn't a correct place to ask this, but I have a use case where I'm looking to send emails via resend, and then followup with emails I've sent.

How can I accomplish this?

Error: 'null' Not Assignable to 'ReactElement | undefined' in `CreateEmailOptions.react`

Hi @bukinoshita
I came across "Resend" and have been using it immediately.

Using it in Next.js and got an error, so let me share it with you.

{
  "next": "^13.4.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "resend": "^0.15.1",
  "typescript": "^4.9.5"
}

await resend.sendEmail({
  from: '[email protected]',
  to: '<MY_MAIL>',
  subject: 'Hello world',
  react: EmailTemplate({ firstName: 'John' }),
  // ^ Error: 'null' Not Assignable to 'ReactElement | undefined' in CreateEmailOptions.react
});

https://resend.com/docs/send-with-nextjs#3-send-email-using-react

In the meantime, we are proceeding with the following source as a response.

react: EmailTemplate({ firstName: 'John' }) ?? undefined, 

[Suggestion] lightweight client without react email / axios

Hey guys,

Been loving experience around resend's sdk thus far and decided to swing by and leave a suggestion. After glancing at internals it seems like you could offer a more lightweight (additional?) client via dropping @react-email/render and axios and utalising node's native fetch client.

Such client could come handy for newer projects / not using react perhaps?

return JSON { data } and not the Axios response

Add remix example

It would be awesome to have remix example.

save submitted react code on the database

Lack of SveltKit example

Email headers will not be sent

I send an email as follows but neither the List-Unsubscribe nor the X-Entity-Ref-ID are shown to me when I view the original email in Gmail.

const { id: emailId } = await resend.sendEmail({
  from: 'Sender <[email protected]>',
  to: '[email protected]',
  subject: 'Login Verification',
  react: <SignInEmail url={loginLink} />,
  headers: {
    'List-Unsubscribe': '<https://example.com/unsubscribe>',
    'X-Entity-Ref-ID': 123,
  },
});

I use resend version 1.0.0

You can add a Proxy config to the fetch method

You can add a Proxy config to the fetch method