Objects are not valid as a React child #2429
Description
Describe the Bug
Trying to render a React component generates the the following error:
Error: Objects are not valid as a React child (found: object with keys {tag, props, key, children, isEscaped, localContexts}). If you meant to render a collection of children, use an array instead. at retryNode (C:\Users\produ\Desktop\trackyrs\node_modules\react-dom\cjs\react-dom-server.bun.development.js:7192:13) at renderNodeDestructive (C:\Users\produ\Desktop\trackyrs\node_modules\react-dom\cjs\react-dom-server.bun.development.js:7065:7) at renderNode (C:\Users\produ\Desktop\trackyrs\node_modules\react-dom\cjs\react-dom-server.bun.development.js:7505:14) at renderElement (C:\Users\produ\Desktop\trackyrs\node_modules\react-dom\cjs\react-dom-server.bun.development.js:6690:18) at retryNode (C:\Users\produ\Desktop\trackyrs\node modules\react-dom\cjs\react-dom-server.bun.development.js:7126:17) at performWork (C:\Users\produ\Desktop\trackyrs\node_modules\react-dom\cjs\react-dom-server.bun.development.js:7927:13) at performMicrotask (unknown) at processTicksAndRejections (native:7:39)" data-cstck=" at Suspense (<anonymous>)"></template><!--/$--> The returned HTML logged in the console is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm11/DTD/xhtm11-transitional.dtd"><!--$!--><template data-msg="Switched to client rendering bec ause the server rendering errored:
Email is sent, but the body is empty.
Context: being used as part of better-auth workflow, called from the Next.js app, server being a Hono.js one
Which package is affected (leave empty if unsure)
@react-email/components
Link to the code that reproduces this issue
Private repository for the time being
To Reproduce
package.json used:
{
"name": "@trackyrs/email",
"version": "0.0.0",
"type": "module",
"exports": {
"./email-service": "./sender/email-service.ts",
"./templates/*": "./emails/*"
},
"sideEffects": false,
"devDependencies": {
"@react-email/preview-server": "4.2.8",
"@trackyrs/typescript-config": "workspace:*",
"@types/nodemailer": "^7.0.1"
},
"dependencies": {
"@react-email/components": "0.5.1",
"dotenv": "^17.2.1",
"nodemailer": "^7.0.5",
"react": "19.1.1",
"react-dom": "19.1.1",
"react-email": "4.0.17"
}
}tsconfig.json used:
{
"extends": "@trackyrs/typescript-config/base.json",
"compilerOptions": {
"module": "esnext",
"moduleResolution": "bundler",
"lib": ["ESNext", "DOM", "DOM.Iterable"],
"target": "esnext",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"outDir": "./dist",
"rootDir": "./",
"baseUrl": "./"
},
"include": ["./**/*"],
"exclude": ["node_modules", "dist"]
}Code to send the email is as follows:
static async sendPasswordResetEmail({
user,
url,
token,
}: ResetPasswordProps) {
try {
const resetLink = `${url}?token=${token}`;
const emailHtml = await render(
MyEmail()
);
const mailOptions = {
from: process.env.EMAIL_USER,
to: user.email,
subject: "Trackyrs - Password reset",
html: emailHtml,
};
await EmailService.getTransporter().sendMail(mailOptions);
} catch (error) {
throw error;
}
}MyEmail is just a copy-paste from the docs:
import { Button, Html } from "@react-email/components";
import * as React from "react";
export const MyEmail = () => {
return (
<Html>
<Button
href="https://example.com"
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
>
Click me
</Button>
</Html>
);
};
export default MyEmail;- Prior versions of react-email, @react-email/components, react have also been tested; issue remain.
- Tsconfig jsx mode also tried as react-jsx, react and preserve; issue remains
Expected Behavior
Email sent with propered rendered body
What's your node version? (if relevant)
Bun 1.2.21 | Windows