[Bug]: resource route does not work with HTTP POST

[sdavids]

I'm using React Router as a...

framework

Reproduction

The example has a simple resource route.

First terminal:

$ cd /tmp
$ git clone https://github.com/sdavids/react-router-form-post-bug
$ cd react-router-form-post-bug
$ npm i
$ node --run dev

---

Second terminal:

$ http --form POST http://localhost:5173/to-uppercase content=test
HTTP/1.1 500 Internal Server Error
Connection: keep-alive
Date: Thu, 30 Jan 2025 16:43:47 GMT
Keep-Alive: timeout=5
Transfer-Encoding: chunked
Vary: Origin
content-type: text/plain

Unexpected Server Error

Error: Expected a Response to be returned from resource route handler


$ http --form POST http://localhost:5173/to-uppercase content=
HTTP/1.1 500 Internal Server Error
Connection: keep-alive
Date: Thu, 30 Jan 2025 16:45:20 GMT
Keep-Alive: timeout=5
Transfer-Encoding: chunked
Vary: Origin
content-type: text/plain

Unexpected Server Error

Error: Expected a Response to be returned from resource route handler


$ http --form POST http://localhost:5173/to-uppercase
HTTP/1.1 500 Internal Server Error
Connection: keep-alive
Date: Thu, 30 Jan 2025 16:46:33 GMT
Keep-Alive: timeout=5
Transfer-Encoding: chunked
Vary: Origin
content-type: text/plain

Unexpected Server Error

Error: Expected a Response to be returned from resource route handler

The first terminal will show:

{ message: 'TEST' }
The following error is a bug in React Router; please open an issue! https://github.com/remix-run/react-router/issues/new/choose
Error: Expected a Response to be returned from resource route handler
    at invariant3 (file:///private/tmp/react-router-form-post-bug/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs:8539:11)
    at handleResourceRequest (file:///private/tmp/react-router-form-post-bug/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs:9275:5)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at requestHandler (file:///private/tmp/react-router-form-post-bug/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs:9061:18)
    at nodeHandler (/private/tmp/react-router-form-post-bug/node_modules/@react-router/dev/dist/vite.js:2006:30)
    at /private/tmp/react-router-form-post-bug/node_modules/@react-router/dev/dist/vite.js:2012:17
{ error: 'content cannot be empty' }
The following error is a bug in React Router; please open an issue! https://github.com/remix-run/react-router/issues/new/choose
Error: Expected a Response to be returned from resource route handler
    at invariant3 (file:///private/tmp/react-router-form-post-bug/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs:8539:11)
    at handleResourceRequest (file:///private/tmp/react-router-form-post-bug/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs:9275:5)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at requestHandler (file:///private/tmp/react-router-form-post-bug/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs:9061:18)
    at nodeHandler (/private/tmp/react-router-form-post-bug/node_modules/@react-router/dev/dist/vite.js:2006:30)
    at /private/tmp/react-router-form-post-bug/node_modules/@react-router/dev/dist/vite.js:2012:17
{ error: 'content cannot be empty' }
The following error is a bug in React Router; please open an issue! https://github.com/remix-run/react-router/issues/new/choose
Error: Expected a Response to be returned from resource route handler
    at invariant3 (file:///private/tmp/react-router-form-post-bug/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs:8539:11)
    at handleResourceRequest (file:///private/tmp/react-router-form-post-bug/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs:9275:5)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at requestHandler (file:///private/tmp/react-router-form-post-bug/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs:9061:18)
    at nodeHandler (/private/tmp/react-router-form-post-bug/node_modules/@react-router/dev/dist/vite.js:2006:30)
    at /private/tmp/react-router-form-post-bug/node_modules/@react-router/dev/dist/vite.js:2012:17

---

Open http://localhost:5173 to verify that the application works.

System Info

System:
    OS: macOS 12.7.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
    Memory: 94.95 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 22.13.0 - ~/.local/run/fnm_multishells/34165_1738255229341/bin/node
    npm: 10.9.2 - ~/.local/run/fnm_multishells/34165_1738255229341/bin/npm
  Browsers:
    Brave Browser: 131.1.73.104
    Chrome: 132.0.6834.112
    Safari: 17.6
  npmPackages:
    @react-router/dev: 7.1.3 => 7.1.3 
    @react-router/node: 7.1.3 => 7.1.3 
    @react-router/serve: 7.1.3 => 7.1.3 
    react-router: 7.1.3 => 7.1.3 
    vite: 6.0.11 => 6.0.11

Used Package Manager

npm

Expected Behavior

The POST request returns a response.

Actual Behavior

Originally I was trying cy.request():

cy.request({
  method: 'POST',
  url: '/to-uppercase',
  body: { content: 'test' },
  form: true,
}).then((res) => {
  expect(res.status).to.eq(200);
});

[timdorr]

I can't see your example repo, so I don't know exactly what code you have. However, this sounds like you're not returning a Response type from the loader/action. You should be wrapping your return in something like Response.json:

export function action(_: Route.ActionArgs) {
  return Response.json({ message: "I am an action!" });
}

[sdavids]

It is not mentioned on

https://reactrouter.com/how-to/resource-routes

nor

https://reactrouter.com/start/framework/actions#server-actions

export async function action({
  request,
}: Route.ActionArgs) {
  let formData = await request.formData();
  let title = formData.get("title");
  let project = await fakeDb.updateProject({ title });
  return project;
}

Once adopting Single Fetch, it is recommended that you incrementally remove the usage of json/defer throughout your application in favor of returning raw objects.

---

Digging deeper I found

https://remix.run/docs/en/main/guides/single-fetch#resource-routes

---

I think the documentation could be improved by mentioning this case.

Testing resource routes via Cypress or a similar tool is not uncommon…

---

Also, I do not think that opting out of turbo-stream just to be able to test the resource route is good.

Yes, there is maybe some workaround like a custom fetcher which sets an HTTP header and inside your server action you return the raw object if the header is set (request comes from the application) and the wrapped object if the header is not set (request comes from somewhere else).

---

Raw Object

export async function action() {
  return { message: 'hello' };
}

via useFetcher()

Response:

[{"_1":2},"data",{"_3":4},"message","hello"]

Relevant Headers:

HTTP/1.1 200 OK
content-type: text/x-script
x-remix-response: yes

via http

$ http --form POST http://localhost:5173/test            
HTTP/1.1 500 Internal Server Error
Connection: keep-alive
Date: Thu, 30 Jan 2025 23:50:00 GMT
Keep-Alive: timeout=5
Transfer-Encoding: chunked
Vary: Origin
content-type: text/plain

Unexpected Server Error

Error: Expected a Response to be returned from resource route handler

Wrapped in Response

export async function action() {
  return  Response.json({ message: 'hello' });
}

via useFetcher()

Response:

[{"_1":2},"data",{"_3":4},"message","hello"]

Relevant Headers:

HTTP/1.1 200 OK
content-type: text/x-script
x-remix-response: yes

via http

$ http --form POST http://localhost:5173/to-uppercase
HTTP/1.1 200 OK
Connection: keep-alive
Date: Thu, 30 Jan 2025 23:53:21 GMT
Keep-Alive: timeout=5
Transfer-Encoding: chunked
Vary: Origin
content-type: application/json

{
    "message": "hello"
}

---

I still think this is a bug.

The framework could determine whether the action was called from a fetcher/loader (maybe via a x-remix-request header) or from the outside—in that case the object would be wrapped in a Response.

If the action returns a Response it will not be wrapped again though.

[sdavids]

The reproducer repo is public now.

[sdavids]

This is the behavior I think it should have:

export async function action() {
  return { message: 'hello' };
}

via useFetcher()/loader

[{"_1":2},"data",{"_3":4},"message","hello"]

via http/curl/Postman/Cypress etc.

[{"_1":2},"data",{"_3":4},"message","hello"]

There is no reason why it throws HTTP 500 instead.