enhance-remix icon indicating copy to clipboard operation
enhance-remix copied to clipboard

Actions in `app/routes/index.js` do not work

Open knowler opened this issue 3 years ago • 2 comments
trafficstars

If I submit a <remix-form> inside of app/routes/index.js where I also have an action defined, I receive the following error.

You're trying to submit to a route that does not have an action.  To fix this, please add an `action` function to the route for [/]

It seems to expect the action to be in app/root.js. I’m not sure how this compares with regular Remix or if this is just an issue with this implementation.

app/routes/index.js
/** 
 * @param {import('enhance-remix').ActionFunctionArgs}
 */
export async function action({ request }) {
  const formData = await request.formData();

  console.log(formData.get('message'));
}

/**
 * @type {import("@enhance/types").EnhanceElemFn}
 */
export default function Index({ html }) {
  return html`
    <main>
      <remix-form action="/" method="POST">
        <label>Message <input name="message"></label>
        <button>Send</button>
      </remix-form>
    </main>
  `;
}

knowler avatar Oct 18 '22 18:10 knowler

I wonder if this is related to https://github.com/remix-run/react-router/pull/9486 and might be fixed by updating the @remix-run/router dependency once released. Maybe you could even use npm overrides to test this theory by setting @remix-run/router to 1.0.3-pre.1.

jrestall avatar Oct 28 '22 21:10 jrestall

You need to submit to an index route: /?index, otherwise you are submitting to the parent route.

jacob-ebey avatar Dec 19 '22 07:12 jacob-ebey