commerce icon indicating copy to clipboard operation
commerce copied to clipboard

Error in Add to Cart and Edit Cart Form

Open osseonews opened this issue 2 months ago • 1 comments

If you inspect the console for the cart, in the Edit Item area (in the cart modal) or the Add to Cart (on product page) before you take any action, you will see the error below in the form action. This error is being caused by the file, edit-item-quantity-button.tsx or in the Add to Cart component. This error with Forms is discussed here in this issue: https://github.com/vercel/next.js/discussions/56234. The form action still works on submit, so maybe this is a "false" error of sorts and can be safely ignored? Or maybe there is some code that can be fixed to prevent this error? The strange thing is that the SubmitButton uses e.preventDefault(), so not sure why the form is firing in React on page load. It does seem to be some bug related to useFormStatus.

javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')

osseonews avatar Apr 14 '24 17:04 osseonews

BTW, here is a screenshot showing the error on Vercel's own demo store on a product page on initial load. The same happens in the cart modal page. screen-error-form

osseonews avatar Apr 15 '24 14:04 osseonews