Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enabling server actions breaks hydration of custom elements #56867

Closed
1 task done
stephenwf opened this issue Oct 15, 2023 · 3 comments
Closed
1 task done

Enabling server actions breaks hydration of custom elements #56867

stephenwf opened this issue Oct 15, 2023 · 3 comments
Labels
bug Issue was opened via the bug report template. locked

Comments

@stephenwf
Copy link

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

@stephenwf stephenwf added the bug Issue was opened via the bug report template. label Oct 15, 2023
@kelihansen
Copy link

Is this the same as #51141? I was having what I believe is a related issue, where the style prop of a custom element was null on the server. I just confirmed that it's fixed when I use next@13.5.6-canary.1 (which includes this React canary fix)

@stephenwf
Copy link
Author

ah yes, that looks like the same issue! Sorry - I did try to search for "custom elements" without any luck.

@github-actions
Copy link
Contributor

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 31, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. locked
Projects
None yet
Development

No branches or pull requests

2 participants