TypeError: Cannot convert object to primitive value with NextJS.

siamahnaf commented 1 month ago

Describe the Bug

I try to use react email render function on nextjs-

import { render } from "@react-email/components";

//Uses
html: render(<ContactTemplate {...value} />)

When I am trying to build the application, every time it gives following error- Screenshot 2024-08-12 at 3 18 13 PM

Here is ContactTemplate component-

import * as React from "react";
import { Html, Head, Font, Tailwind, Text, Section, Link, Container } from '@react-email/components';

//Interface
import { Inputs } from "@/Components/Contact/Form";

const ContactTemplate = (data: Inputs) => {
    return (
        <Html lang="en">
            <Head>
                <Font
                    fontFamily="Poppins"
                    fallbackFontFamily="Verdana"
                    webFont={{
                        url: "https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecmNE.woff2",
                        format: 'woff2',
                    }}
                    fontWeight={400}
                    fontStyle="normal"
                />
                <Font
                    fontFamily="Poppins"
                    fallbackFontFamily="Verdana"
                    webFont={{
                        url: "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2",
                        format: 'woff2',
                    }}
                    fontWeight={600}
                    fontStyle="normal"
                />
            </Head>
            <Tailwind>
                <Container className="mt-6">
                    <Text className="text-3xl text-center font-bold">New Contact Message</Text>
                    <Section className="mt-12">
                        <Text className="text-base !m-0">First Name: <span className="font-bold">{data.firstName}</span></Text>
                        <Text className="text-base !m-0">Last Name: <span className="font-bold">{data.lastName}</span></Text>
                        <Text className="text-base !m-0">Email: <span className="font-bold"><Link href={`mailto:${data.email}`}>{data.email}</Link></span></Text>
                        <Text className="text-base !m-0">Phone: <span className="font-bold">{data.phone}</span></Text>
                        <Text className="text-base !m-0">Message: <span className="font-bold">{data.message}</span></Text>
                    </Section>
                </Container>
                <Section className="bg-[#ead1dc] mt-10">
                    <Container className="my-5">
                        <Text className="text-[17px] text-center">Sent from contact us page!</Text>
                    </Container>
                </Section>
            </Tailwind>
        </Html>
    );
};

export default ContactTemplate;

Which package is affected (leave empty if unsure)

@react-email/render

Link to the code that reproduces this issue

Sorry.

To Reproduce

I am ensure that the error is comming for render function, If remove and try to build the application, it do not gives any error.

Expected Behavior

Somethings issues on render function

What's your node version? (if relevant)

No response

gabrielmfern commented 1 month ago

I don't think this is an issue with render, it must be something on how you are calling it wrong somehow, can't say without a reproduction. Try trimming down the code until you have something minimal that still has the issue and share it here.

Without a reproduction, I can't tell exactly what the issue here is.

siamahnaf commented 1 month ago

I can replicate it.

<Head>
    <Font
        fontFamily="Roboto"
        fallbackFontFamily="Verdana"
        webFont={{
            url: "https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2",
            format: "woff2",
        }}
        fontWeight={400}
        fontStyle="normal"
    />
</Head>

The error is coming with Font Component

gabrielmfern commented 1 month ago

No error on my side when using that in an email template. Please share a full repository so that I can reproduce properly.

JuandaGarcia commented 1 week ago

I have the same problem 😵‍💫

I have this email template called AdminNewOrder :

import {
    Body,
    Button,
    Container,
    Column,
    Head,
    Heading,
    Hr,
    Html,
    Img,
    Link,
    Preview,
    Row,
    Section,
    Text,
} from '@react-email/components'
import { Tailwind } from '@react-email/tailwind'
import { categories } from 'lib/categories'
import * as React from 'react'
import { Order } from 'utils/types/Orders'

export const AdminNewOrder = (order: Order) => {
    const category = categories.find(c =>
        c.services.some(s => s.variants.some(v => v.id === order.service))
    )
    const service = category?.services.find(s =>
        s.variants.some(v => v.id === order.service)
    )
    const orderTitle = `${category?.name || ''} - ${service?.name || ''} - ${
        order.service_name
    }`

    return (
        <Html>
            <Head />
            <Preview>
                {orderTitle} - ${order.charge.toString()}
            </Preview>
            <Tailwind>
                <Body className="bg-white my-auto mx-auto font-sans px-2">
                    <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
                        <Section className="mt-[32px]">
                            <Img
                                src={`${process.env.APP_URL}/img/logo.png`}
                                width="80"
                                height="80"
                                alt="Logo de Turboclub"
                                className="my-0 mx-auto"
                            />
                        </Section>
                        <Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
                            Nuevo Pedido de <strong>Turboclub</strong>!
                        </Heading>
                        <Text className="text-black text-[14px] leading-[24px]">
                            Hola! Hemos recibido un nuevo pedido de{' '}
                            <strong>{orderTitle}</strong> por un total de{' '}
                            <strong>${order.charge.toString()}</strong>.
                        </Text>
                        <Row>
                            <Column>
                                <strong>Order ID:</strong> {order.id}
                            </Column>
                        </Row>
                        <Row>
                            <Column>
                                <strong>Link:</strong> {order.link}
                            </Column>
                        </Row>
                        <Row>
                            <Column>
                                <strong>Cantidad:</strong> {order.quantity}
                            </Column>
                        </Row>
                        <Row>
                            <Column>
                                <strong>Service ID:</strong> {order.service}
                            </Column>
                        </Row>
                        <Row>
                            <Column>
                                <strong>Provider Name:</strong>{' '}
                                {order.metadata?.dataProvider?.name}
                            </Column>
                        </Row>
                    </Container>
                </Body>
            </Tailwind>
        </Html>
    )
}

export default AdminNewOrder

I’m using it with Resend

const { error } = await resend.emails.send({
    from: 'New <onboarding@resend.dev>',
    to: ['new@gmail.com'],
    subject: 'New',
    react: AdminNewOrder({ ...newOrder, id: order.id }),
})

When I compile the Next.js application, I get this error:

The error occurs since version 0.0.23

resend / react-email