TypeError: Response body object should not be disturbed or locked #49524
Replies: 34 comments 29 replies
-
|
Hi ! Any idea please ? |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I have the same error when I build and the site is hosted at firebase. it works very well in DEV The error occurs only if there is a Body in a POST, PUT request ... |
Beta Was this translation helpful? Give feedback.
-
|
How do you mean by if there is a body in a POST, PUT request ? |
Beta Was this translation helpful? Give feedback.
-
|
I suggest reporting this as an issue |
Beta Was this translation helpful? Give feedback.
-
|
Facing same issue around here in my React/Typescript/Prisma app... |
Beta Was this translation helpful? Give feedback.
-
|
I have created an Issue, here it is |
Beta Was this translation helpful? Give feedback.
-
|
I think the issue is not related to Firebase, I'm experiencing this with Call stack: - error TypeError: Response body object should not be disturbed or locked
at extractBody (node:internal/deps/undici/undici:6384:17)
at new Request (node:internal/deps/undici/undici:7264:48)
at new NextRequest
at NextRequestAdapter.fromNodeNextRequest
at NextRequestAdapter.fromBaseNextRequest
at RouteHandlerManager.handle
at process.processTicksAndRejections
at async doRender
at async cacheEntry.responseCache.get.incrementalCache.incrementalCache |
Beta Was this translation helpful? Give feedback.
-
|
I agree, it's nothing to do with Firebase. I just started a REST API fresh with , got as far as DELETE and the same thing happens. The function is quite literally empty. export async function DELETE(request: Request) {
} "dependencies": {
"@prisma/client": "^4.15.0",
"@types/node": "20.2.5",
"@types/react": "18.2.9",
"@types/react-dom": "18.2.4",
"@types/validator": "^13.7.17",
"autoprefixer": "10.4.14",
"eslint": "8.42.0",
"next": "13.4.4",
"postcss": "8.4.24",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-validator": "^0.1.0",
"tailwindcss": "3.3.2",
"typescript": "5.1.3",
"validator": "^13.9.0"
},
"devDependencies": {
"eslint-config-next": "^13.4.4",
"prisma": "^4.15.0"
} |
Beta Was this translation helpful? Give feedback.
-
|
Raised it myself: #51439 |
Beta Was this translation helpful? Give feedback.
-
|
I have the same problem and tested earlier next versions. Version 13.2.5-canary.28 has a fix called "Fix dev ipc request on node v16" #47825.
Since the error messages of this current problem mentions 'undici' and was working before maybe somewhere there is the cause? |
Beta Was this translation helpful? Give feedback.
-
|
Soooo. It was working behaviour, but it's 'bad' style to use a body with a DELETE method so now NextJS throws an error. You have to use params instead of the request body in the function. |
Beta Was this translation helpful? Give feedback.
-
|
Yeh, I think the whole handling of the Request has been changed which has affected a few things that throw this error. |
Beta Was this translation helpful? Give feedback.
-
|
If you try to access the request body in GET something similar happens. Both are just needlessly confusing and there is also no mentioning of this behaviour in the documentation. At least I havent't found any mentioning of this behaviour. |
Beta Was this translation helpful? Give feedback.
-
|
Also, as far as I know. There's no elegant way to respond to the end user that the method is not implemented like that. It just bombs out with an error if you supply a body from the client. |
Beta Was this translation helpful? Give feedback.
-
|
But beyond that, there's a problem with POST and PUT, which are also allowed here It would be nice if the NEXTJS team would take our feedback into account, instead of forcing us to work with Vercel, which has no problems with this functionality. |
Beta Was this translation helpful? Give feedback.
-
|
Looks like my problem is fixed in next: 13.4.8-canary.12. I just had a read of a few threads about it and noticed a commit. Can't say about your Firebase issue. I only ever use local hosting. |
Beta Was this translation helpful? Give feedback.
-
|
i am facing the same error，anybody know how to resolve it？ |
Beta Was this translation helpful? Give feedback.
-
|
If your problem is POST requests whilst using Firebase: #50166 If you problem is trying to use the request body on a DELETE HTTP method, then I don't think you can 'resolve' it. You have to use params instead. #51439 |
Beta Was this translation helpful? Give feedback.
-
|
Making sure you are returning a NextResponse from the route. |
Beta Was this translation helpful? Give feedback.
-
|
I got the error in the latest version on DELETE route what I did was to rollback to 13.2.4 which worked just fine. 13.3 and 13.4 got a couple issues. I am just learning but am sure some are finding same issues too |
Beta Was this translation helpful? Give feedback.
-
|
I have faced the same issue with POST (I was trying to get a value from the response's body and set it as a cookie). The solution for me was to clone the response using the clone() method. Hope it will help at least some of you. |
Beta Was this translation helpful? Give feedback.
-
|
I had the error : TypeError: Body is disturbed or locked when I was trying to call the function "res.text()" instead of "res.json()" |
Beta Was this translation helpful? Give feedback.
-
Hello, So, its's a time to close this issue 😎. I FOUND THE ERROR!!!. I really struggled so much of this headache error, after spending and debugging. at last without wasting time, YOU JUST WANNA TO REMOVE import { useRouter } from 'next/navigation'; and all of the things that was done by next/navigation in your using component. seems LIGHT, is'nt it? but it was true!!!!!!!!. HOPE YOU RESOLVED YOUR ISSUE :) |
Beta Was this translation helpful? Give feedback.
-
|
I've discovered this error has only been occurring for me when I've neglected to return a For example: export async function POST(req: any, res: NextApiResponse) {
const data: Array<Products> = await req.json();
try {
await dbConnect();
let result: Array<Products> = []
if (data.length) {
data.forEach(async (product) => {
let doc: Products | null = await Product.findOne({
name: product.name
});
if (doc) {
result.push(doc);
} else {
doc = await Product.create(product);
result.push(doc!);
}
return result
});
return NextResponse.json({ message: result, success: true });
} else {
return NextResponse.json({ message: result, success: false });
}
// NextRespose.json({...}) needs to be included here
} catch (err) {
return NextResponse.json({ error: err, success: false });
}
}I experienced this error MANY times when nesting responses within |
Beta Was this translation helpful? Give feedback.
-
|
This response has been super helpful. This was the exact problem I was having. Reading through this feed, I was hoping it wasn't some underlying issue with next, and I'm glad I saw this comment. Thank! |
Beta Was this translation helpful? Give feedback.
-
|
Maybe dumb but I had to add e.preventDefault() to solve this problem. |
Beta Was this translation helpful? Give feedback.
-
|
This works for me. Thanks a lot! |
Beta Was this translation helpful? Give feedback.
-
|
Worked for me, thanks! |
Beta Was this translation helpful? Give feedback.
-
|
same lol. i was using it in a |
Beta Was this translation helpful? Give feedback.
-
|
I don't know if it matters, but what is suspicious for me is that in the DELETE function you once return the status in the first argument instead of the second one: |
Beta Was this translation helpful? Give feedback.
-
|
Meanwhile I have a theory that at least one possible reason for this could be that the page which called fetch for an API route is refreshed (or otherwise re-routed) while the API route is still being processed. Then, the next server cancels pending fetches for db accesses (in my case MongoDB) because the browser cancels the pending fetch because of the re-route and this leads to exceptions being thrown and those might cause the "TypeError: Response body object should not be disturbed or locked" error. |
Beta Was this translation helpful? Give feedback.
-
|
Meanwhile, I know that the type error in my case was thrown in the call of the instance method json() of the NextRequest object in my POST function. And it happens (at least on my case) because the fetch is aborted by the browser before the method json() is called. I could prove this by adding a "sleep" in my async POST method before the call to json() and manually refreshing the page in the browser during this sleep. So what is the official "perfect" method to implement a next request? |
Beta Was this translation helpful? Give feedback.
-
|
Now, I had another case where this error occurred: |
Beta Was this translation helpful? Give feedback.
-
Strapi + Next JsError happened in dev mode only but disappeared in production mode |
Beta Was this translation helpful? Give feedback.
-
|
In my case, my routes were located under the /api folder, but I also had PayloadCMS which mounts its own routes published /api. When I moved my routes to another folder things worked again. It seems like PayloadCMS has a middleware that reads the request body on its way down the handler tree. |
Beta Was this translation helpful? Give feedback.
-
|
work for me, I just make new folder |
Beta Was this translation helpful? Give feedback.
-
|
Took some reading. But in case of Payload this is indeed the solution. |
Beta Was this translation helpful? Give feedback.
-
|
The |
Beta Was this translation helpful? Give feedback.
-
|
The problem seems fixed with the latest v14 version. |
Beta Was this translation helpful? Give feedback.
-
|
I'm still getting the same thing on |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I've seen similar solution mentioned above, but not quite the same as I have. In my code, I was accessing incoming request body (like |
Beta Was this translation helpful? Give feedback.
-
|
Just for info - my issue was NOT api related (although the error came from there) - I was calling an API endpoint following an I needed to add a handler for the function eg: Noob error but caught me out :) |
Beta Was this translation helpful? Give feedback.
-
|
We had the same issue, turns out (in our case) it was calling the Catching it in variable did the trick: |
Beta Was this translation helpful? Give feedback.
-
|
We had the same issue and were able to track it down to clients closing the socket before Next.js handled it: #63481 (comment) It was fixed last week and should be released in the latest canary. |
Beta Was this translation helpful? Give feedback.
-
|
const createContext = ({ Use this in server.ts |
Beta Was this translation helpful? Give feedback.
-
|
In case, it helpes someone. In my case, it was because I am using it with an express server, and I had: app.use(bodyParser.json());Removing the line stopped the issue from happening |
Beta Was this translation helpful? Give feedback.
-
|
This was the solution for me as well, but do you know why this would cause the error? |
Beta Was this translation helpful? Give feedback.
-
|
Just experienced the same issue. Im using custom express server and my custom express middleware needs json parser. I initially applied parser to the whole express router which caused nextjs handler to explode with this error. Applying parser to specific endpoint fixed the problem. instead adding it to the whole app handler I did |
Beta Was this translation helpful? Give feedback.
-
|
@stychu no, I didn't need that. Have you tried putting it just before your custom endpoints, or using app.use with a regex expression for your routes? |
Beta Was this translation helpful? Give feedback.
-
|
In my case i just remove the app.use(express.json()) and use a function that parsed the body just in case of necessity and works. code: |
Beta Was this translation helpful? Give feedback.
-
|
commenting expressApp.use(express.json()); works |
Beta Was this translation helpful? Give feedback.
-
|
I found a solution to my case (I'm using PayloadCMS 3.0 with NextJS): I tried to reuse a Code that breaks // ... imports
// top-level-file.ts
// init a response on init
const emailNotExistResponse = NextResponse.json(
{ errors: [{ message: "Email not exists" }] },
{ status: 400 },
);
const emailAlreadyVerifiedResponse = NextResponse.json(
{ errors: [{ message: "Email already verified" }] },
{ status: 400 },
);
const successResponse = NextResponse.json(
{ message: "Verify email sent" },
{ status: 200 },
);
export const sendVerifyEmail: Endpoint = {
path: "/send-verify-email",
method: "post",
handler: async (req: PayloadRequest) => {
try {
return successResponse;
} catch (error) {
req.payload.logger.error(error);
return internalServerError;
}
},
};Code that works: simply instantiating response inside the handler. // ... imports
// top-level-file.ts
export const sendVerifyEmail: Endpoint = {
path: "/send-verify-email",
method: "post",
handler: async (req: PayloadRequest) => {
// init a response for each request
const emailNotExistResponse = NextResponse.json(
{ errors: [{ message: "Email not exists" }] },
{ status: 400 },
);
const emailAlreadyVerifiedResponse = NextResponse.json(
{ errors: [{ message: "Email already verified" }] },
{ status: 400 },
);
const successResponse = NextResponse.json(
{ message: "Verify email sent" },
{ status: 200 },
);
try {
return successResponse;
} catch (error) {
req.payload.logger.error(error);
return internalServerError;
}
},
}; |
Beta Was this translation helpful? Give feedback.
and others
Uh oh!
There was an error while loading. Please reload this page.
-
Hi :)
Since the upgrade from 13.2 to 13.3 and now 13.4, my
deletefetch method doesn't works now and return the following error:It's the same on any fetch with the
deletemethod but it's works withpostorgetfor example.I use the
approuter and my configuration is:I'am trying to upgrade to the latest canary release but it is the same.
An example of code with
deletemethod and doesn't works now:And the api route where the
deletemethod doesn't works but thegetandpostmethod works:Any idea how what's happen ?
Thx for your help :)
Beta Was this translation helpful? Give feedback.
All reactions