Error: Objects are not valid as a React child in Email Demo Preview

chuanxshi commented 5 days ago

Describe the Bug

Environment

Operating System: Windows 10/11
React-Email version: canary
Build tool: esbuild with PNPM

Actual Behavior

An error occurs stating that an object is being incorrectly used as a React child: Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props}). If you meant to render a collection of children, use an array instead. The issue seems to occur around the execution of vm.runInNewContext(builtEmailCode, fakeContext, { filename: emailPath }).

error-screenshot

Preliminary Analysis

I have introduced additional logging to trace the output of fakeContext.module.exports following the VM execution, which consistently returns {}, resulting in fakeContext.module.exports.default being undefined. This indicates that React components or elements are not being recognized properly but are instead being treated as undefined objects. This issue could be associated with the manner in which the built email code is processed within the Node.js VM context. It suggests potential problems related to serialization or the handling of context isolation by the vm module, particularly under Windows environments.

Suggested Next Steps

Test whether this issue is consistently reproducible on different setups, particularly on other Windows machines as well as on Linux and macOS.
Inspect the esbuild configuration and the resulting output to ensure React components are correctly transpiled and bundled.
Examine if there are platform-specific behaviors in the Node.js vm module that could affect how execution contexts are handled.

Collaboration

I am open to a joint debugging session if other developers have experienced similar issues or have insights into the cause. This might help in identifying and resolving the issue more efficiently.

Which package is affected (leave empty if unsure)

react-email

Link to the code that reproduces this issue

https://github.com/resend/react-email/blob/canary/packages/react-email/src/utils/get-email-component.ts

To Reproduce

Steps to Reproduce

Clone/download the repository.
Run pnpm install and pnpm run build at the root.
Navigate to apps/demo.
Run pnpm run dev.
Access the local server to trigger the email rendering process.

Expected Behavior

The email content should render without errors in the virtual machine context used for SSR.

What's your node version? (if relevant)

20.9.0

gabrielmfern commented 5 days ago

Is this really specific to Windows? It seems to me like something to do with improper dependencies being installed, make sure that you didn't change the lock file.

chuanxshi commented 4 days ago

Is this really specific to Windows? It seems to me like something to do with improper dependencies being installed, make sure that you didn't change the lock file.

I never changed the lock file and tested the pnpm install and pnpm dev from both Linux and Windows, none worked as expected. However, for Linux, the error was different, it didn't even reach this step, so I will log a separate issue for that.

And for the Windows, it was a bumpy ride. First, the pnpm install and pnpm dev never worked from root. What I did was to run a pnpm build from the root, with partial success.

The readme at the root of this project isn't really clear at telling what the localhost:3000 was supposed to render. e.g. the web & doc or the demo? so i then navigate to "apps/web" and "apps/demo" individually, and run pnpm dev. For "apps/web", it works as expected, I can browse the web and doc. However, for "apps/demo", it displays above issue: "Error: Objects are not valid as a React child" in Email Demo Preview.

gabrielmfern commented 4 days ago

Went through the exact steps and didn't get any error, but as I mentioned before, this error is probably because the demo is using X React version and some component is using Y React version.

chuanxshi commented 4 days ago

Went through the exact steps and didn't get any error, but as I mentioned before, this error is probably because the demo is using X React version and some component is using Y React version.

appreciate the hint. The different React versions seem to be the cause of the issue. I was able to get apps/demo running by using the following resolutions in package.json:

"resolutions": {
  "react": "18.2.0",
  "react-dom": "18.2.0"
}

This works as a temporary fix, but it does introduce some issues (e.g., with react-email-with-resend), so I consider this more of a workaround than a permanent solution.

Next Steps: I'm happy to continue the conversation here, or over discord/slack if you prefer, I can also help with a PR or improvements to documentation once we’ve aligned on a direction forward.

gabrielmfern commented 3 days ago

@chuanxshi We can't do it through resolutions for now because the react-email app does not use React 19 yet for a few reasons that are too hard to explain in this comment.

I'm happy to continue the conversation here, or over discord/slack if you prefer, I can also help with a PR or improvements to documentation once we’ve aligned on a direction forward.

I've made a PR that should fix these sorts of issues on the future #1706. It should do the same as the pnpm.overrides, but only for the components, and for top-level dependencies. For now you can stick to your workaround

resend / react-email