Skip to content

Hydration fails with server actions enabled and custom tag in layout #51141

@mritzerfeld

Description

@mritzerfeld

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.5.0: Mon Apr 24 20:53:19 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T6020
    Binaries:
      Node: 20.2.0
      npm: 9.7.1
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.5
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

http://github.com/mritzerfeld/next-server-action-with-custom-tag

To Reproduce

  1. Install latest next.js: npx create-next-app@latest
  2. Enable server actions in next.config.js
  3. Wrap {children} in root layout with custom HTML tag like <my-tag>

Describe the Bug

With server actions enabled in next.config.js, client-side hydration fails when a custom HTML tag with a dash like <my-tag> is present in a layout. The server response does not include any output for this tag and its children. Replacing the custom tag with a regular tag like <div> works completely fine.

Expected Behavior

Server-generated contents within custom HTML tags to be included in server response, as using Next without server actions or with regular HTML tags.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    UpstreamRelated to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.).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