Added $ACTION_ID hidden input causes hydration error
Unanswered
Cape lion posted this in #help-forum
Cape lionOP
I believe there might be a bug with server actions. If I use a <form> with a server action, a hidden input gets added with name
Then I get a hydration error that I was only able to debug after upgrading to v15 RC.
The only way I can find to solve it is to use a
$ACTION_ID_.... I'm not adding this, Next is.Then I get a hydration error that I was only able to debug after upgrading to v15 RC.
The only way I can find to solve it is to use a
useEffect and isMounted to make sure the form only renders client-side. I hate having to do this though, it's a giant form that I want rendered from the server.
7 Replies
Cape lionOP
To be clear: this is a
layout.tsx rendering page.tsx via children.
Uh this hydration error is not supposed to happen. How did you make the form?
Cape lionOP
What do you mean? It's just an html
<form> in a client component.i asked that because this is probably related to how you set up that specific form. people have been using <form> normally without any issues.
Nile Crocodile
I don't think this is a bug, I think there indeed is supposed to be input containing action id.
it would be helpful if you could send some code? @Cape lion
there will be an ACTION_ID to help the nextjs server identify the form. but this ACTION_ID is not supposed to make a hydration error