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

fdwilogo · 2024-09-26T20:02:56Z

Is there any solution with this?

Also found in @react-email/components version 0.025, react-email version 3.0.1, and NextJS 14.2.9

Weelet-cz · 2024-10-18T10:22:25Z

For me it was happening, when i had Tailwind component over Html element

 <Tailwind
            config={{
                theme: {
                    extend: {
                        colors: {
                            "custom-color": "#ff0000",
                        },

                    },
                },
            }}
        >
        <Html>
              ...
        </Html>   
</Tailwind>

Solution was to

Put Tailwind over Body
Example

<Html>
        <Head>
            <Font
                fontFamily="Raleway"
                fallbackFontFamily="Verdana"
                webFont={{
                    url: "https://fonts.googleapis.com/css2?family=Raleway&display=swap",
                    format: "woff2",
                }}
                fontWeight={400}
                fontStyle="normal"
            />
        </Head>
        <Tailwind
            config={{
                theme: {
                    extend: {
                        colors: {
                            "custom-color": "#ff0000",
                        },

                    },
                },
            }}
        >

            <Body className="bg-[#ffffeb] m-0 p-0">
               ...
           </Body>
     </Tailwind>
<Html>

Problem that could be in this post

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

Is that Head is <Head/> instead of <Head> <Head/>

But thats only idea and I have not tried it.

But the first thing I mentioned happed to me and I resolved it with moving the Tailwind as I said previously.

But that generated new error, and that you cant use media query in classes in body. I havent resolved that issue, I just dont use media query classes.

So for example if you use
"sm:flex-col" then it wont render you the email template. I had problems with that in novu, maybe same happens for resend.

Hope that it will help

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

fdwilogo commented Sep 26, 2024

Weelet-cz commented Oct 18, 2024

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

fdwilogo commented Sep 26, 2024

Weelet-cz commented Oct 18, 2024

siamahnaf commented Aug 12, 2024 •

edited by gabrielmfern

Loading

JuandaGarcia commented Sep 5, 2024 •

edited

Loading