next.js: [NEXT-1194] After upgrade to 13.3 request.json() in DELETE route handler fails
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Binaries:
Node: 18.12.1
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.3.1-canary.1
eslint-config-next: 13.2.4
react: 18.2.0
react-dom: 18.2.0
Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue
N/A
To Reproduce
import { NextResponse } from "next/server"
const DATA_SOURCE_URL = "https://jsonplaceholder.typicode.com/todos"
type Todo = {
userId: number,
id: number,
title: string,
completed: boolean,
}
export async function DELETE(request: Request) {
const { id }: Partial<Todo> = await request.json() // error
if (!id) return NextResponse.json({ "message": "Todo id required" })
await fetch(`${DATA_SOURCE_URL}/${id}`, {
method: 'DELETE',
})
return NextResponse.json({ "message": `Todo ${id} deleted` })
}
Describe the Bug
I only encounter this error on the DELETE route handler. My POST and PUT route handlers can await request.json()
with no issues.
I run the same code in 13.2.4 and do not receive the error.
I am sending valid and very simple JSON:
{
"id": 3
}
Nevertheless, I receive this error:
SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at NextRequest.json (node:internal/deps/undici/undici:6160:23)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async DELETE (webpack-internal:///(sc_server)/./src/app/api/todos/route.ts:63:21)
Expected Behavior
I expect await request.json()
to work as it does in the POST and PUT route handlers.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 75
- Comments: 53 (2 by maintainers)
Commits related to this issue
- Rolls back to @next13.2.4 Due to a conflicting bug: https://github.com/vercel/next.js/issues/48096 — committed to randreu28/next-to-do by randreu28 a year ago
- Chore: change next version 13.4.0 → 13.2.4 - DELETE route error https://github.com/vercel/next.js/issues/48096 — committed to Geuni620/Breakable-Toy by Geuni620 a year ago
- Fix missing request body in DELETE and OPTIONS Route Handlers (#51874) It looks like the `content-length` header can't be ignored for the request forwarded to the render worker. See https://github.co... — committed to vercel/next.js by shuding a year ago
I stumbled across this but then found that DELETE generally should not have a request body - the fact that nextjs previously supported it sounds like a bug to me: https://www.rfc-editor.org/rfc/rfc9110.html#name-delete
Though it sounds frustrating if you were previously depending on this behavior…
The way that work for me with DELETE is using the params (same as the doc) and stop to use the body like other on top suggest
maybe is not in the doc but the magic here is too create the route like this :
for example :
and then u just need to
I hope it will be helpful
The problem exist also in 13.4.1
+1 Facing the issue with dev server. Production build works fine.
Still occurs in Next.js v13.4.2 and is impacting the commerce template: https://github.com/vercel/commerce
@alecf thanks.
I use the following codes for those new to app /api and do not know how to get the query params.
+1: work in production, don’t work in localhost
Working with next@13.4.4 by using POST Method facing this issue as well.
here are the error messages.
By useing request.body
Throws
By useing request.json()
Throws
By useing request.text()
Throws
Could anyone tell me how can I retrive BODY in request ? 😿😿😿😿
i dont know if this will also work for delete i got this issue with POST where i wasn’t able to get body i’m a noob in this kind of this discussions
well i got work around for my problem like this hope it would be some use to everyone here
I believe that this should work, maybe ur problem is coming from the way u call it, can u share with us your handle, and maybe try to change ur Response with NextResponse for example :
@daveteu
I am having the same issue with the POST endpoint. Debugging for two days, decided to switch back to /pages router and it works on first try. The app router is not ready for production yet, in my case atleast.
Add this to the bottom of your route file to make your route handler a dynamic route;
You need to make your route handler a dynamic route. NextJs failed to do this automatically, I think it has a bug that sets dynamic as
error
when trying to calculate it automatically.See References
Hi guys ! I just found working solution to get ID when performing DELETE Request …
const deleteResponse = await fetch(
/api/yourRoute/route`, { method: “DELETE”,Basically what we are passing ID in our own header… On other hand in NextJS
It works for me… Thanks
Phew. I’m not alone. 13.4.0
+1