Bug: Hydration fails in Next.js with server actions actions custom tags

[mritzerfeld]

I'm currently testing the experimental server actions feature in Next.js. Once this feature is enabled Next.js uses React's experimental build. This however results in hydration failed error messages when using custom HTML tags with a dash like my-tag in JSX. 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.

I previously reported this issue at vercel/next.js#51141 where they suspect this to be an issue within React itself.

React version: Experimental

Steps 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>

Link to code example:
https://github.com/mritzerfeld/next-server-action-with-custom-tag

The current behavior

Server-generated contents with custom HTML tags do no produce any output for such.

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

[gnoff]

@mritzerfeld when Next.js updates to an upcoming Canary release you should be able to verify this is fixed