Server actions are not progressively enhanced if imported from a client component

[Fredkiss3]

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/A

Which 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

1. clone & start the server
2. disable JavaScript in the browser and reload the page
3. click on the button Increment counter next to Server form, you will see that it work and browser gets reloaded
4. click on the button Increment counter next to Client 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 next@13.4.8-canary.2 as of next@13.4.8-canary.1 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

[Fredkiss3]

It seems like this issue will be fixed after this PR has been merged : #52005

[shuding]

Exactly fixed by #52005

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.