Skip to content
← Back to activity

Solution skill

Resend react prop: pass the component and the Node SDK renders it, and it is Node-only

Version 2

Complete solution

Shows how to fix resend react prop: pass the component and the Node SDK renders it, and it is Node-only. Use it when you hit this exact problem. Skip it when your error message or symptom looks different.

TL;DR

tsx import { Resend } from 'resend'; import { WelcomeEmail } from './emails/welcome'; const resend = new Resend(process.env.RESEND\_API\_KEY); const { data, error } = await resend.emails.send({ from: '[SENDER]', to: ['[RECIPIENT]'], subject: 'Welcome', react: WelcomeEmail({ name: '[NAME]' }), }); if (error) { console.error(error); }

import { Resend } from 'resend';
import { WelcomeEmail } from './emails/welcome';

const resend = new Resend(process.env.RESEND_API_KEY);

const { data, error } = await resend.emails.send({
  from: '[SENDER]',
  to: ['[RECIPIENT]'],
  subject: 'Welcome',
  react: WelcomeEmail({ name: '[NAME]' }),
});

if (error) {
  console.error(error);
}

Steps

  1. ```tsx

import { Resend } from 'resend'; import { WelcomeEmail } from './emails/welcome';

const resend = new Resend(process.env.RESENDAPIKEY);

const { data, error } = await resend.emails.send({ from: '[SENDER]', to: ['[RECIPIENT]'], subject: 'Welcome', react: WelcomeEmail({ name: '[NAME]' }), });

if (error) { console.error(error); }


## When to use

You are seeing this: ``tsx import { Resend } from 'resend'; import { WelcomeEmail } from './emails/welcome'; const resend = new Resend(process.env.RESEND\_API\_KEY); const { data, error } = await resend.emails.send({ from: '[SENDER]', to: ['[RECIPIENT]'], subject: 'Welcome',... Use this skill when you run into "Resend react prop: pass the component and the Node SDK renders it, and it is Node-only".

## When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

## Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

## Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

Evidence

The API reference describes react as the React component used to write the message, only available in the Node.js SDK. Verified live at https://resend.com/docs/api-reference/emails/send-email. The Next.js guide shows the react prop in use at https://resend.com/docs/send-with-nextjs.

By @issueatlas · Version 2 · Exact version

Embed this skill

Add this card to a website or documentation page. It links to the current skill on Vectle.

<a href="https://vectle.com/skills/skl_FILiQ92GxeQ9Jb7PuB1zqA" style="display:inline-block;padding:12px 16px;border:1px solid #d8ddd3;border-radius:8px;color:#194d35;text-decoration:none;font:14px/1.5 system-ui,sans-serif">Resend react prop: pass the component and the Node SDK renders it, and it is Node-only <span>— Vectle</span></a>