#error: reactDOMServer.renderToPipeableStream is not a function

24 messages · Page 1 of 1 (latest)

pseudo sleet
#

I get this error meassage when trying to render a react-email as html (following the official docs: react.email/docs/utilities/render

the code:

import { render } from '@react-email/render';
import MBlogEmail from './emails/MBlogEmail';

export default function App() {
  return (
    <>
      <MBlogEmail />
      <button onClick={() => {console.log(htmlCode)}}>Get HTML Code!</button>
    </>
  )
}
const htmlCode = await render(<MBlogEmail />);
mossy thicket
#

Can you show more detail?
Which error message do you mean?

pseudo sleet
#

src/emails/MBlogEmail.tsx:3:17: ERROR: Top-level await is currently not supported with the "cjs" output format.
This is my error when running the project with "email dev --dir src/emails" and also the <button (the one in the code above) does not appear

#

but thats not my only problem 😄

#

reactDOMServer.renderToPipeableStream is not a function

#

this is the error i get when i try to run this with just vite, so not "email dev --dir src/emails"

#

and now ive also been trying to use Resend to send the email, but that also doesnt work 😄 because of cors

mossy thicket
pseudo sleet
# 
export default function App() {

  const handleOnClick = async () => {
    const html = await render(<MBlogEmail />, {
      pretty: true,
    });
    console.log(html);
    POST(html);
  }

  return (
    <>
      <MBlogEmail />
      <button onClick={handleOnClick}>Send Email!</button>
    </>
  )
}

I managed to fix my "renderToPipelineStream is not a function" issue by making the await be a part of async()

#

and aparently my CORS issue with Resend is because you need NextJS or a connection to some other backend to use it, so guess ill install and learn NextJS. I was hoping to get it to work without it

mossy thicket
# 

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const { html } = req.body;

  try {
    const transporter = nodemailer.createTransport({
      service: 'Gmail',
      auth: {
        user: process.env.EMAIL_USER,
        pass: process.env.EMAIL_PASS,
      },
    });

    await transporter.sendMail({
      from: '[email protected]',
      to: '[email protected]',
      subject: 'MBlog Email',
      html,
    });

    res.status(200).json({ message: 'Email sent successfully!' });
  } catch (error) {
    console.error('Error sending email:', error);
    res.status(500).json({ error: 'Failed to send email' });
  }
}```
#

In the above you didn't declare POST founction.

#

You need to define it and also make a backend function to recieve it and dispatch it again

#

DM me, and I can tell you more

pseudo sleet
#

ohh yes, im sorry. This is POST() ... (i should probobly rename that):

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

export async function POST(html: string) {
  const { data, error } = await resend.emails.send({
    from: 'MaseM <[email protected]>',
    to: ['[email protected]'],
    subject: 'Hello World',
    html: html,
  });
  if (error) { return () => {console.log("error: "); console.error({ error });} }
  console.log("data: " + { data });
};

But i will try out your Nodemailer version, it seems a little nicer than Resend, thanks 🙂

#

so ... this is not possible with just React, right? i have to use a backend server to send the mail?

mossy thicket
#

yes

#

To send reliabley you need to do that

#

But we can do that without server using third party library

# 
  const response = await fetch('https://api.sendgrid.com/v3/mail/send', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.SENDGRID_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      personalizations: [{ to: [{ email: '[email protected]' }] }],
      from: { email: '[email protected]' },
      subject: 'Test Email',
      content: [{ type: 'text/html', value: emailContent }],
    }),
  });

  if (!response.ok) {
    throw new Error('Failed to send email');
  }
};```
mossy thicket
pseudo sleet
#

i see i see