-
Notifications
You must be signed in to change notification settings - Fork 29.8k
Description
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: Thu Jun 8 22:22:19 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T8103
Binaries:
Node: 18.16.0
npm: 9.5.1
Yarn: 1.22.19
pnpm: 8.6.2
Relevant Packages:
next: 13.4.8-canary.15
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0
typescript: 5.1.6
Next.js Config:
output: N/AWhich area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true), Data fetching (gS(S)P, getInitialProps)
Link to the code that reproduces this issue or a replay of the bug
https://github.com/Fredkiss3/next-client-server-action-bug
To Reproduce
- clone & start the server
- disable JavaScript in the browser and reload the page
- click on the button
Increment counternext toServer form, you will see that it work and browser gets reloaded - click on the button
Increment counternext toClient form, it won't work
Describe the Bug
When importing server actions from a client component, next seems to not initialize them so that they could work without JavaScript enabled or before the JS has finished loading. The generated HTML in SSR is different wether the server action is imported from a server component or a client component.
Here is the html generated for the server component :
<form action="" enctype="multipart/form-data" method="POST">
<input type="hidden" name="$ACTION_ID_8e9a737600b0f7123502bed2e2e35f84115a82c7" />
<button> Increment counter </button>
</form>Here is the html generated for the client component :
<form action="javascript:throw new Error('A React form was unexpectedly submitted.')">
<button>Increment counter</button>
</form>We can see clearly that a hidden input indicating the correct action is missing and there are props that are missing on the form.
This bug seems to have been introduced in [email protected] as of [email protected] as the generated HTML for the client component is the same for 13.4.8-canary.1 :
<form action="" enctype="multipart/form-data" method="POST">
<input type="hidden" name="$ACTION_ID_8e9a737600b0f7123502bed2e2e35f84115a82c7">
<button>Increment counter</button>
</form>i suspect this PR to be the cause : #51723 (though i may be wrong).
Expected Behavior
Server actions in client components should also be progressively enhanced, and the generated HTML in SSR should be the same.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response