search

resend / react-email

💌 Build and send emails using React
https://react.email
MIT License
12.57k stars 571 forks source link

Output of `email export` does not includes `PreviewProps` as default values. #1407

Closed CuriosBasant closed 1 month ago

CuriosBasant commented 1 month ago

Describe the Bug

I'm using this library to generate emails for supabase email templates. I've my email created like this.

import { Body, Html, Text } from '@react-email/components'

export default function TestEmail(props: { token: string }) {
  return (
    <Html>
      <Body>
        <Text>Your token is:</Text>
        <Text>{props.token}</Text>
      </Body>
    </Html>
  )
}

TestEmail.PreviewProps = {
  token: '{{ .Token }}',
}

The output that I'm getting on running email export is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">
  <body>
    <p style="font-size: 14px; line-height: 24px; margin: 16px 0">Your token is:</p>
    <p style="font-size: 14px; line-height: 24px; margin: 16px 0"></p> <!-- Missing {{ .Token }}  -->
  </body>
</html>

I just have started using this library, lemme know if I'm missing something or if this is the expected behaviour. Also please point me in the right direction, for how can I achieve my desired result.

Which package is affected (leave empty if unsure)

react-email

Link to the code that reproduces this issue

https://react.email/docs/cli#email-export

To Reproduce

Just try to run email export and the generated output doesn't include the PreviewProps defaults.

Expected Behavior

I expected it to generate the html file with PreviewProps as default props.

What's your node version? (if relevant)

No response

gabrielmfern commented 1 month ago

In your situation, you should be using something like:

export default function TestEmail(props: { token: string } = { token: '{{ .Token }}' }) {
  return (
    <Html>
      <Body>
        <Text>Your token is:</Text>
        <Text>{props.token}</Text>
      </Body>
    </Html>
  )
}

The PreviewProps are meant to even override this, but only when running email dev. They are meant to avoid having to use these kinds of default values to see how the email would look with actual data when running email dev, so this is indeed expected behavior.

Closing this as not planned. If you have another question, you can also create a discussion for it, which is probably going to be more fitting.