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

chuanxshi · 2024-09-24T07:26:17Z

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 }).

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

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

gabrielmfern · 2024-09-24T13:52:04Z

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 · 2024-09-24T16:43:25Z

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 · 2024-09-24T17:26:33Z

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 · 2024-09-25T02:54:32Z

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 · 2024-09-25T17:25:56Z

@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

DwifteJB · 2024-09-30T12:55:56Z

Same issue occuring using payload beta, since it requires react 19. Silly request, but is there any way to somehow use both versions?

gabrielmfern · 2024-09-30T15:26:49Z

@DwifteJB This issue is only on internal development, if you are having it while using React Email, you can use whatever React version you want., you aren't fixed in any version, so your issue should be somewhere else other than React Email.

react-email/packages/font/package.json

Lines 33 to 35 in ad2e6c4

    
           "peerDependencies": { 
        
             "react": "^18.0 || ^19.0 || ^19.0.0-rc" 
        
           },

The error for this issue only happens because we use React 19 internally for our apps.

DwifteJB · 2024-10-08T18:56:44Z

@DwifteJB This issue is only on internal development, if you are having it while using React Email, you can use whatever React version you want., you aren't fixed in any version, so your issue should be somewhere else other than React Email.

react-email/packages/font/package.json

Lines 33 to 35 in ad2e6c4

"peerDependencies": {

"react": "^18.0 || ^19.0 || ^19.0.0-rc"

},

The error for this issue only happens because we use React 19 internally for our apps.

If I use a new folder, with different node modules will it work fine for rendering with nextjs 19.0.0rc?

gabrielmfern · 2024-10-11T15:35:33Z

@DwifteJB it will, as long as the React version is the same for the Email React elements creation and the React version being used to render.

chuanxshi added the Type: Bug Confirmed bug label Sep 24, 2024

gabrielmfern linked a pull request Sep 25, 2024 that will close this issue

chore(root): Ensure all components install a specific React 19 version #1706

Open

gabrielmfern added App: Preview and removed App: Preview labels Oct 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

chuanxshi commented Sep 24, 2024 •

edited

Loading

gabrielmfern commented Sep 24, 2024 •

edited

Loading

chuanxshi commented Sep 24, 2024 •

edited

Loading

gabrielmfern commented Sep 24, 2024 •

edited

Loading

chuanxshi commented Sep 25, 2024 •

edited

Loading

gabrielmfern commented Sep 25, 2024 •

edited

Loading

DwifteJB commented Sep 30, 2024

gabrielmfern commented Sep 30, 2024 •

edited

Loading

DwifteJB commented Oct 8, 2024

gabrielmfern commented Oct 11, 2024

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

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

Comments

chuanxshi commented Sep 24, 2024 • edited Loading

Describe the Bug

Environment

Actual Behavior

Preliminary Analysis

Suggested Next Steps

Collaboration

Which package is affected (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Steps to Reproduce

Expected Behavior

Expected Behavior

What's your node version? (if relevant)

gabrielmfern commented Sep 24, 2024 • edited Loading

chuanxshi commented Sep 24, 2024 • edited Loading

gabrielmfern commented Sep 24, 2024 • edited Loading

chuanxshi commented Sep 25, 2024 • edited Loading

gabrielmfern commented Sep 25, 2024 • edited Loading

DwifteJB commented Sep 30, 2024

gabrielmfern commented Sep 30, 2024 • edited Loading

DwifteJB commented Oct 8, 2024

gabrielmfern commented Oct 11, 2024

chuanxshi commented Sep 24, 2024 •

edited

Loading

gabrielmfern commented Sep 24, 2024 •

edited

Loading

chuanxshi commented Sep 24, 2024 •

edited

Loading

gabrielmfern commented Sep 24, 2024 •

edited

Loading

chuanxshi commented Sep 25, 2024 •

edited

Loading

gabrielmfern commented Sep 25, 2024 •

edited

Loading

gabrielmfern commented Sep 30, 2024 •

edited

Loading