`Error: Expected a Response to be returned from resource route handler` when returning an object from a resource route

[virajmehta]

I'm using React Router as a...

framework

Reproduction

• Check out this file.
• Go to the dashboard folder.
• Stand up the environment using docker compose and the instructions in README.md (docker compose up and npm run dev with some environment variables set)
• select a function in the form at http://localhost:5173/optimization/fine-tuning.
• see the error in server logs

System Info

System:
    OS: macOS 14.3
    CPU: (16) arm64 Apple M3 Max
    Memory: 265.94 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.4.0 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 131.0.6778.205
    Safari: 17.3
  npmPackages:
    @react-router/dev: ^7.0.2 => 7.1.0 
    @react-router/node: ^7.0.2 => 7.1.0 
    @react-router/serve: ^7.0.2 => 7.1.0 
    react-router: ^7.1.0 => 7.1.0 
    vite: ^5.4.11 => 5.4.11

Used Package Manager

npm

Expected Behavior

I expected the route to work and return the object to the caller -- this lets me use the following snippet to ensure type safety:

 const response = await fetch(`/api/curated_inferences/count?${params}`);
    const { loaderData } =
      (await response.json()) as CuratedInferencesCount.ComponentProps;
    setCounts(loaderData as CountsData);

Actual Behavior

I get the following server error:

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:///Users/viraj/tensorzero/tensorzero/dashboard/node_modules/react-router/dist/development/chunk-W3HZJLUQ.mjs:8537:11)
    at handleResourceRequest (file:///Users/viraj/tensorzero/tensorzero/dashboard/node_modules/react-router/dist/development/chunk-W3HZJLUQ.mjs:9273:5)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at requestHandler (file:///Users/viraj/tensorzero/tensorzero/dashboard/node_modules/react-router/dist/development/chunk-W3HZJLUQ.mjs:9059:18)
    at nodeHandler (/Users/viraj/tensorzero/tensorzero/dashboard/node_modules/@react-router/dev/dist/vite.js:1980:30)
    at /Users/viraj/tensorzero/tensorzero/dashboard/node_modules/@react-router/dev/dist/vite.js:1986:17

[timdorr]

You need to wrap your return in Response.json for resource routes. You're returning a raw JavaScript object, not a Response object.

[nilsbunger]

Good to know. The error message is confusing, it indicates it's a bug in react router. Can the error message be clearer?

[churbis]

The "The following error is a bug in React Router" message occurs:

1. When the wrong type is returned (as per OP)
2. When nothing is returned

#2 was particularly confusing because there is no first-class API route; everything is done through routes. So while a GET should return something from the loader(), if it doesn't I don't think that the user should be told that there is a bug in react-router.

Probably some different status code e.g, bad request/result (depending on the root of the failure to pass a desired response) would be in order as the default behavior for aloader() call that's not going to return a default component?