Remix run - submitting an action and getting errro "root" - does not have an action, but you are trying to submit to it

Question

Im having a bit of trouble getting my action to dispatch in remix run - I have an Aside which comes out with all the data from my shopping cart - I have a form that collates all the data - and when I want the checkout to be created I want to call the action

<Form action='/products' method="post">
                {cart.map((item, idx) => ( 
                <div key={idx}>
                <input readOnly value={item.product.id} type="hidden" name="id"/>
                <input readOnly value={item.quantity}  type="hidden" name="quantity"/>
                </div>

                ))}
                
                <button 
                className="mr-2 m"
                >              Add to Cart
                </button>
</Form>


export const  action: ActionFunction = async ({request}) => {
  // get the form data from the POST
  const formData = await request.formData()
  const id = formData.getAll('id')
  const quantity = formData.getAll('quantity')

  const newObj = id.map((data, index) => {
    
    return  { variantId: data, quantity: quantity[index] }

  } )

  

  const cart = await createCheckout(newObj)
  return cart
}

From the data that is requested here my checkout URL is generated so i need to wait for the response. When I submit i get a 405 error saying method not allowed

react_devtools_backend.js:4026 Route "root" does not have an action, but you are trying to submit to it. To fix this, please add an `action` function to the route

This is the error message but I cant seem to find anywhere in the docs how to add a action function to the route? because I swear I am already doing this?

Answer 1

tldr;

I ran into this same issue and was able to solve by changing my action url to include ?index at the end.

Details

My "products" file was located at /products/index.tsx

In order for remix to not think I was referring to root I had to use the following action route:

action="/products?index"

Just using action="/products" alone did not work.

Once I added the ?index part to the action, everything worked as expected.

According to the remix docs:

If you want to post to an index route use ?index in the action: action="/accounts?index" method="post" />

For more details, see: https://remix.run/docs/en/v1/api/remix#form

Also, note that most of the time you can just leave off the action and the Form will use the route in which it is rendered.