Closed
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/sandbox/nextjs-server-actions-hydration-rv6jjs
To Reproduce
- Enable
experimental.serverActions
- Add a JSX element that is not in the HTML tags (e.g.
<some-element>
) - Add children to that element (e.g.
<some-element><div>hi</div></some-element>
) - 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