search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.96k stars 26.98k forks source link

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

Open pini85 opened 10 months ago

pini85 commented 10 months ago

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

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 commented 5 months ago

Hi, I've also noticed this in all my AppRoute pages with <form action={ _actionFunction }> 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