res.json("string") is not working as expected

[vvo]

What version of Next.js are you using?

10.0.6

What version of Node.js are you using?

12.20.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

When using:

const result = "yes";
res.json(result);

Then the response body is:

yes

Which is not readable by a fetch call doing response.json().

instead of:

"yes"

Expected Behavior

I expect Next.js to send "yes" instead of yes down the wire when using res.json("yes"). "yes" is valid JSON and useful when all you need from your server is a single response, not an object.

When using res.json(data), I expect Next.js to just do: res.send(JSON.stringify(data));, while right now it's trying to be smarter than that:

next.js/packages/next/next-server/server/api-utils.ts

Line 249 in 004ad62

const isJSONLike = ['object', 'number', 'boolean'].includes(typeof body)

.

To Reproduce

backend route:

const result = "yes";
res.json(result);

frontend:

const response = await fetch("/api/call");
console.log(await response.json());

// Throw errors unexpected token

[zEh-]

JSON has to be either of type object or array on root level. But throwing seems too harsh.

[vvo]

Hi @zEh-, when you say JSON has to be either object or array on root level, is this some Next.js requirement written somewhere? I have never seen that.

It seems Next.js is fine with JSON being either object, number or boolean, but not string. While string is valid JSON, see:

Thanks!

PS: The throw happens on the frontend, when trying to read the response from the backend, which is not well-written JSON, even if I used .json().

[zEh-]

Up to RFC 4627 only objects and arrays were valid JSON. Many tools still follow this rule.

[YuriGor]

Another related issue - looks like it's impossible to send such a valid JSON value as null.
When I try to do res.json(null) e.g. if single data object not found - I get empty reply with status 200ok on frontend.

It's especially uncomfortable when using SWR, because in useSWR in this case I have undefined as result, but at the same time undefined supposed to indicate loading is still in progress, so I cannot distinguish empty result from pending state.

So please extend bug description to:
res.json("string") and res.json(null) are not working as expected
It would be good idea to check if all other JSON data types are also supported.

[YuriGor]

as I found, SWR actually gives an error in these string/null cases, so it's only nextjs issue.

[anderlaw]

Another related issue - looks like it's impossible to send such a valid JSON value as null. When I try to do res.json(null) e.g. if single data object not found - I get empty reply with status 200ok on frontend.

It's especially uncomfortable when using SWR, because in useSWR in this case I have undefined as result, but at the same time undefined supposed to indicate loading is still in progress, so I cannot distinguish empty result from pending state.

So please extend bug description to: res.json("string") and res.json(null) are not working as expected It would be good idea to check if all other JSON data types are also supported.

good idea, and I encountered this error too

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.