Form Action Set to JavaScript Throw Statement in Dynamically Displayed Form Element

[pini85]

Link to the code that reproduces this issue

https://github.com/pini85/form-action-bug-next-js-14

To Reproduce

1. Start the application using next dev.
2. Click a button to dynamically display a form component.
3. Inspect the form element using browser developer tools.
4. Observe that the form's action attribute is set to javascript:throw new Error(...).

Current vs. Expected behavior

Expected the form's action attribute to be set correctly. However, the developer tools show the action attribute set to a JavaScript throw statement, indicating an unexpected handling of the form action in dynamically displayed components

Verify canary release

• [x] 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 23.1.0: Mon Oct  9 21:28:12 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T8103
Binaries:
  Node: 18.17.0
  npm: 9.6.7
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.5-canary.42
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

No response

[devnet-uk]

Hi, I've also noticed this in all my AppRoute pages with <form action={ action_Function }> components which are navigated to from a Link component.

This doesn't inhibit invocation of the action but does remove all the hidden inputs ($ACTION_ properties). which is causing issue such as MissingCSRF: CSRF token was missing during an action.

Manually reviewing both the nextjs & React repo, I've come across these two - maybe this will help?

https://github.com/facebook/react/blob/20841f9a6205a633e6d08a274db974481daaca23/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L462

and

https://github.com/facebook/react/blob/20841f9a6205a633e6d08a274db974481daaca23/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L2505

others are also experiencing this issue: https://github.com/vercel/next.js/discussions/56234

[nextjs-bot]

This issue has been automatically marked as stale due to inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!