Skip to content

Enabling server actions breaks hydration of custom elements #56867

Closed
@stephenwf

Description

@stephenwf

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/nextjs-server-actions-hydration-rv6jjs

To Reproduce

  1. Enable experimental.serverActions
  2. Add a JSX element that is not in the HTML tags (e.g. <some-element>)
  3. Add children to that element (e.g. <some-element><div>hi</div></some-element>)
  4. Run next dev

Current vs. Expected behavior

Current hydration error:

app-index.js:31 Warning: Expected server HTML to contain a matching <div> in <some-element>.
    at div
    at some-element
    at div
    at main

Expected: well.. Expected server HTML to contain a matching <div> in <some-element>.

Verify canary release

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

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 20.7.0
  npm: 10.1.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 13.5.4
  eslint-config-next: 13.5.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

App Router

Additional context

Non-working example with latest:
https://codesandbox.io/p/sandbox/nextjs-with-server-actions-fgjnsl?file=%2Fapp%2Fpage.tsx%3A8%2C9-10%2C24

Non-working example with canary:
https://codesandbox.io/p/sandbox/nextjs-with-server-actions-canary-2tj2j4?file=%2Fapp%2Fpage.tsx%3A8%2C1-10%2C24

Working example without server actions enabled:
https://codesandbox.io/p/sandbox/nextjs-without-server-actions-mn9xgz?file=%2Fapp%2Fpage.tsx%3A1%2C1

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue was opened via the bug report template.locked

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions