Hydration error caused by returning a promise as children from a server component

[tom-sherman]

Link to the code that reproduces this issue

https://github.com/tom-sherman/next-promise-as-child-bug

To Reproduce

1. next dev
2. Load the page

Current vs. Expected behavior

Current:

A React error is thrown

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
...
Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
...
Uncaught TypeError: Cannot read properties of null (reading 'nodeName')
    at warnForInsertedHydratedElement (webpack-internal:///(:3000/app-pages-browse

Expected:

As far as I'm aware this is a supported pattern in React canary, but if that's not the case or this is not implemented yet I'd expect a more clear and specific error message from Next.js.

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
Binaries:
  Node: 18.13.0
  npm: 8.13.2
  Yarn: 1.22.19
  pnpm: 8.6.6
Relevant Packages:
  next: 13.5.5-canary.2
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

[feedthejim]

hey @tom-sherman where did you see this being supported in React canary?

[tom-sherman]

In React Canary, at least in a client component, you can render a promise as a child. <div>{p}</div> is equivalent to <div>{use(p)}</div>. See https://stackblitz.com/edit/stackblitz-starters-gedwgh?file=src%2FApp.js

Here is the PR: facebook/react#25634

[sophiebits]

Perhaps related to facebook/react#27247.

[eps1lon]

Repros in older React versions but not in latest React canary. Still repros in latest Next.js canary though.

[eps1lon]

Fixed in facebook/react#28284 which was included in #62326. Earliest Next.js release including that change is v14.1.1-canary.71.

Be aware that no 4.1.x stable release includes this fix. 14.2.0 should be the first stable release including this fix.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.