Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported. #1859

ITSJORDAN-TFA · 2025-01-08T03:17:25Z

Describe the Bug

I'm using react-email within my current next.js 15 app router project.

This is a new project but ive got a similar setup with the pages router in another project.
I keep getting an error whenever I try to embed anything in the component.

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

private

To Reproduce

create a new nextjs 15 app router app (npx create-t3-app is what i ran)
manually create the emails folder in src/emails.

run the npm run email --dir=src/email

Remove anything from the column component (should render)
Add something within the column component (will crash)

import { Button, Column, Html, Section, Text } from "@react-email/components";
import * as React from "react";

export default function Email() {
	return (
		<Html>
			<Button href="https://example.com" style={{ background: "#000", color: "#fff", padding: "12px 20px" }}>
				Click me
			</Button>
			<Section style={{ paddingLeft: "20px", paddingRight: "20px", backgroundColor: "#FFF" }}>
				<Column>
					<Text style={{ fontSize: "8px" }}>This is an automatic email sent from a mailbox that is not monitored</Text>
				</Column>
			</Section>
		</Html>
	);
}

Expected Behavior

Renders the email template

What's your node version? (if relevant)

node 18.19.1, npm 10.2.4

ITSJORDAN-TFA · 2025-01-08T03:21:13Z

This component renders:

import { Html } from "@react-email/html";
import { Body } from "@react-email/body";
import { Section } from "@react-email/section";
import { Column } from "@react-email/column";

export default function Email() {
  return (
    <Html lang="en">
      <Body style={{ backgroundColor: "#61dafb" }}>
        <Section>
        </Section>
      </Body>
    </Html>
  );
};

ITSJORDAN-TFA · 2025-01-08T03:22:33Z

This one errors:

import { Html } from "@react-email/html";
import { Body } from "@react-email/body";
import { Section } from "@react-email/section";
import { Column } from "@react-email/column";

export default function Email() {
	return (
		<Html lang="en">
			<Body style={{ backgroundColor: "#61dafb" }}>
				<Section>
					<Column style={{ width: "50%" }}>{/* First column */}</Column>
					<Column style={{ width: "50%" }}>{/* Second column */}</Column>
				</Section>
			</Body>
		</Html>
	);
}

gabrielmfern · 2025-01-08T14:10:18Z

The issue seems to be quite specific, might be caused by many things, that is why you should create a minimal reproduction. Can you create a minimal Next.JS app with the same error and share it here?

peter-svensson · 2025-01-09T10:10:48Z

I got bitten by this as well. In my case I had:

  <Container>
      <Section>
        <Column align="left">
           fluff
        </Column>
        <Column align="right">
           fluff
        </Column>        
      </Section>
  </Container>

Adding a Row component before the Column fixed it for me

    <Container>
      <Section>
        <Row>
          <Column align="left">
            fluff
          </Column>
          <Column align="right">
            fluff
          </Column>
        </Row>
      </Section>
    </Container>

Not sure if that's the general problem, just wanted to share 😊

alejots · 2025-01-09T21:56:53Z

I got bitten by this as well. In my case I had:

  <Container>
      <Section>
        <Column align="left">
           fluff
        </Column>
        <Column align="right">
           fluff
        </Column>        
      </Section>
  </Container>

Adding a Row component before the Column fixed it for me

    <Container>
      <Section>
        <Row>
          <Column align="left">
            fluff
          </Column>
          <Column align="right">
            fluff
          </Column>
        </Row>
      </Section>
    </Container>

Not sure if that's the general problem, just wanted to share 😊

Thanks @peter-svensson, I was having the same issue, and wrapping everything with the Row component fixed it.

ITSJORDAN-TFA · 2025-01-10T02:46:45Z

Its interesting because i have another project using the same email template and that one works fine (react-components v0.0.15) without wrapping the Row component, something introduced in a new version?

Also using this template throws the same error

<Html>
        <Head />
        <Preview>🔔 Subscription Event</Preview>
        <Body style={{ margin: "auto", marginTop: "auto", backgroundColor: "#BFBFBF", fontFamily: "sans-serif" }}>
            <Container style={{ margin: "auto", maxWidth: "650px", backgroundColor: "#FFF" }}>
                <Header logo={"/logo_white.svg"} primaryColor={"#2253FF"} title={`🔔 Subscription Event`} />
                <Section style={{ padding: "20px", paddingBottom: "0px", paddingTop: "0px" }}>
                    <Text>ff</Text>
                </Section>
                <Footer />
            </Container>
        </Body>
    </Html>
    ```

ITSJORDAN-TFA · 2025-01-10T02:59:26Z

Its interesting because i have another project using the same email template and that one works fine (react-components v0.0.15) without wrapping the Row component, something introduced in a new version?

Also using this template throws the same error

<Html>
        <Head />
        <Preview>🔔 Subscription Event</Preview>
        <Body style={{ margin: "auto", marginTop: "auto", backgroundColor: "#BFBFBF", fontFamily: "sans-serif" }}>
            <Container style={{ margin: "auto", maxWidth: "650px", backgroundColor: "#FFF" }}>
                <Header logo={"/logo_white.svg"} primaryColor={"#2253FF"} title={`🔔 Subscription Event`} />
                <Section style={{ padding: "20px", paddingBottom: "0px", paddingTop: "0px" }}>
                    <Text>ff</Text>
                </Section>
                <Footer />
            </Container>
        </Body>
    </Html>
    ```

This was because my child component also had a Column without a Row wrapper.
Adding the Row wrapper seems to have fixed the issue, should this be added to the column documentation?

jperasmus · 2025-01-11T19:30:13Z

Throwing my case in here since it might help someone else. I did not have Column components without a Row, but in a deeply nested component, I had a Section rendered as children within a Text component.

I can also reproduce it by just nesting a Text component somewhere within another Text component.

alligatorjazz · 2025-01-15T16:27:38Z

I got bitten by this as well. In my case I had:

  <Container>
      <Section>
        <Column align="left">
           fluff
        </Column>
        <Column align="right">
           fluff
        </Column>        
      </Section>
  </Container>

Adding a Row component before the Column fixed it for me

    <Container>
      <Section>
        <Row>
          <Column align="left">
            fluff
          </Column>
          <Column align="right">
            fluff
          </Column>
        </Row>
      </Section>
    </Container>

Not sure if that's the general problem, just wanted to share 😊

exactly the same issue. my case was the following:

<Section className="bg-fgColor uppercase w-64 px-4 py-2 text-textColor">
  <Column>
	{etc...}
  </Column>
  <Column>
        {etc...}
  </Column>
</Section>

enclosing the columns in a <Row> fixed it for me as well.

ITSJORDAN-TFA added the Type: Bug Confirmed bug label Jan 8, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported. #1859

Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported. #1859

ITSJORDAN-TFA commented Jan 8, 2025

ITSJORDAN-TFA commented Jan 8, 2025

ITSJORDAN-TFA commented Jan 8, 2025

gabrielmfern commented Jan 8, 2025

peter-svensson commented Jan 9, 2025

alejots commented Jan 9, 2025 •

edited

Loading

ITSJORDAN-TFA commented Jan 10, 2025 •

edited

Loading

ITSJORDAN-TFA commented Jan 10, 2025

jperasmus commented Jan 11, 2025 •

edited

Loading

alligatorjazz commented Jan 15, 2025

Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported. #1859

Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported. #1859

Comments

ITSJORDAN-TFA commented Jan 8, 2025

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)

ITSJORDAN-TFA commented Jan 8, 2025

ITSJORDAN-TFA commented Jan 8, 2025

gabrielmfern commented Jan 8, 2025

peter-svensson commented Jan 9, 2025

alejots commented Jan 9, 2025 • edited Loading

ITSJORDAN-TFA commented Jan 10, 2025 • edited Loading

ITSJORDAN-TFA commented Jan 10, 2025

jperasmus commented Jan 11, 2025 • edited Loading

alligatorjazz commented Jan 15, 2025

alejots commented Jan 9, 2025 •

edited

Loading

ITSJORDAN-TFA commented Jan 10, 2025 •

edited

Loading

jperasmus commented Jan 11, 2025 •

edited

Loading