Malformed JSON issue

[msshw]

Hello there!

I recently began experimenting with @hono/zod-validator. Unfortunately, I encountered an error message stating Malformed JSON in request body in request body. I was wondering if anyone has come across this issue before and if there's anyone who could offer assistance in finding a solution.

My client sends a request:

import type { AppType } from '../server/router'
import { hc } from 'hono/client'

const client = hc<AppType>('https://localhost/');

const res = await client.testrpc.$post({
  json: {
    x: 'Hello',
  },
});

And the server receives it:

const route = app.post(
  '/testrpc',
  zValidator(
    'json',
    z.object({
      x: z.string(),
    })
  ),
  (c) => {
    const data = c.req.valid('json');
    return c.jsonT({
      success: true,
      message: `${data.x}`,
    }, 200);
  }
)

Thank you in advance for your help!

[yusukebe]

Hi @msshw !

I tried your code on Cloudflare Workers with Wrangler, but it works well. So, I would like to know which platform/runtime you use.

[msshw]

Hi @yusukebe! I use bun js on mac.

[Jarred-Sumner]

@msshw are you on Bun v0.5.9?

[msshw]

@Jarred-Sumner I am on 0.5.8

[Jarred-Sumner]

Can you try on Bun v0.5.9 (bun upgrade)? I can’t guarantee it is fixed but we did fix a possibly related bug in the most recent release

[msshw]

Unfortunately, I get the same result with bun@0.5.9

[yusukebe]

Hi @Jarred-Sumner @msshw !

I have tried running that on Bun. Then I got the Malformed JSON in request body error, the same as @msshw. The result is the same in v0.5.9 and v0.5.8.

[Jarred-Sumner]

Can you give this another try on the canary build? We pushed a fix that might’ve fixed this yesterday

[yusukebe]

@Jarred-Sumner

Thanks for letting us know but It is still not working. I can find the minimal code to reproduce that issue:

export default {
  fetch: async (req: Request) => {
    const clone = req.clone()
    const data = await clone.json()
    return new Response(JSON.stringify(data))
  },
}

Then post the request:

curl -X POST -d '{"foo": "bar"}' http://localhost:3000/

It is necessary to clone() because it may decode a JSON object more than once. Without clone, the second json() will fail because Body is used. At least in Cloudflare Workers, we can do json() with the cloned Request, we need to be able to do that in Bun.

[Jarred-Sumner]

Oh, the bug is with .clone(). That makes sense now. We haven't implemented clone for this usecase yet.

A temporary but not good workaround would be to do await req.blob() and bun has a non-standard .json() function on the Blob prototype (to make it more aligned with Request and Response)

[yusukebe]

Ah, I see. I am waiting for it to be implemented:)

[yusukebe]

@Jarred-Sumner

The content with clone.blob() will be blank. Does it mean that it is not implemented yet?

const clone = req.clone()
const blob = await clone.blob()
console.log(blob.size) // 0

[Jarred-Sumner]

Will be fixed in Bun v0.7.2 https://github.com/oven-sh/bun/issues/1381

[yusukebe]

@Jarred-Sumner Thanks!

[yusukebe]

Hi @Jarred-Sumner

I've upgraded Bun to v0.7.2, but it's not be fixed. Could you check it?

[Lucasnribeiro]

0.7.3 still has this bug

[twinstae]

bun v0.8.1 still...

[juhojo]

I noticed that this error occurs if a HTTP request is missing Content-Type: "application/json" header. Maybe helpful, probably not 🤷.

[chronark]

Also ran into this, setting the content type to json fixed it

[ganevdev]

Maybe this will help someone. Malformed JSON in request body error can occur if you use the GET method. Use the POST method (because we are sending data in the body). Malformed JSON in request body error is not very informative about this.