TypeError: Cannot convert object to primitive value with NextJS. #1586

siamahnaf · 2024-08-12T09:20:07Z

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-

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

The text was updated successfully, but these errors were encountered:

gabrielmfern · 2024-08-12T15:51:27Z

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 · 2024-08-14T09:19:10Z

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 · 2024-08-14T17:23:23Z

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

JuandaGarcia · 2024-09-05T03:30:15Z

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 <[email protected]>',
    to: ['[email protected]'],
    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

siamahnaf added the Type: Bug Confirmed bug label Aug 12, 2024

gabrielmfern added the Package: @react-email/render label Aug 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: Cannot convert object to primitive value with NextJS. #1586

TypeError: Cannot convert object to primitive value with NextJS. #1586

siamahnaf commented Aug 12, 2024 •

edited by gabrielmfern

Loading

gabrielmfern commented Aug 12, 2024

siamahnaf commented Aug 14, 2024

gabrielmfern commented Aug 14, 2024

JuandaGarcia commented Sep 5, 2024 •

edited

Loading

TypeError: Cannot convert object to primitive value with NextJS. #1586

TypeError: Cannot convert object to primitive value with NextJS. #1586

Comments

siamahnaf commented Aug 12, 2024 • edited by gabrielmfern Loading

Describe the Bug

Which package is affected (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Expected Behavior

What's your node version? (if relevant)

gabrielmfern commented Aug 12, 2024

siamahnaf commented Aug 14, 2024

gabrielmfern commented Aug 14, 2024

JuandaGarcia commented Sep 5, 2024 • edited Loading

siamahnaf commented Aug 12, 2024 •

edited by gabrielmfern

Loading

JuandaGarcia commented Sep 5, 2024 •

edited

Loading