AbortError on Form Submission in React Router Netlify Template (Dev Server)

[kkatsi]

Hi,

I started a fresh project using the React Router Netlify template. I encountered an issue when submitting a form in a minimal setup. Here's the code in my home route:

export async function action() {
  return { isSuccess: true };
}

export default function Home() {
  const fetcher = useFetcher();
  return (
    <fetcher.Form method="POST">
      <input type="submit" value="submit" />
    </fetcher.Form>
  );
}

When I submit the form, I encounter the following issue:

Request Details:

Request URL: http://localhost:3000/_root.data?index
Response Code: 500
Response Body:

[
  {"_1":2},
  "error",
  ["SanitizedError",3,4,5],
  "AbortError",
  "This operation was aborted",
  "AbortError: This operation was aborted\n    at new DOMException (node:internal/per_context/domexception:53:5)\n    at AbortController.abort (node:internal/abort_controller:391:18)\n    at IncomingMessage.<anonymous> (file:///Users/kostas/Desktop/personal/villasirnick-netlify/node_modules/@mjackson/node-fetch-server/dist/node-fetch-server.js:66:16)\n    at IncomingMessage.emit (node:events:518:28)\n    at emitCloseNT (node:internal/streams/destroy:147:10)\n    at processTicksAndRejections (node:internal/process/task_queues:81:21)"
]

Observations:

The issue occurs only in the development server (npm run dev).
When I run the build and start scripts, everything works as expected.
It seems to be related to the dev-server.js code.

Let me know if I need to provide any additional details to assist in resolving this issue.

Thank you!

[rago4]

Updating @mjackson/node-fetch-server package resolved the issue in my case. I tested it with versions 0.4.1 and 0.5.0 and they both seem to work.