Hydration fails with server actions enabled and custom tag in layout

[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

[Fredkiss3]

I think it may be because server actions opt you into the experimental version of react and they may have done some work around custom elements that causes this error.

The default version of react that next uses is the canary version which the react team said that framework could use as they are close to a stable version.

[mritzerfeld]

@Fredkiss3 That's a good point. Is there any way to use the experiment version of React in Next without enabling a specific unstable feature?

[shuding]

Hey, could you open an issue to https://github.com/facebook/react? This is likely a problem of the experimental version of React.

[mritzerfeld]

Done at facebook/react#27286

[mritzerfeld]

Issue has been solved according to facebook/react#27286. So it should be working again in Next.js once the included canary build gets updated.

[mritzerfeld]

Issue is resolved as of Next 14.0.0.

[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.