Issue
I am using NextJS v14.1.0 and server action in client component. I get the proper message but also getting a TypeError that body is unusable.
src/app/auth/account-verification/page.tsx
const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const data = { requestId: token, otp: parseInt(otp) };
const response = await AccountVeficationAction(data);
ActionResponseHandler(response, "Account Verification");
if (response.success) {
Router.push("/auth/login");
}
};
/src/app/auth/_utils/actions/action.ts
export const AccountVeficationAction = async (body: any) => {
try {
const response = await fetch(`${BASEURL}/auth/confirm-account`, {
method: "POST",
headers: {
"Content-Type": "application/json",
// Add other necessary headers (e.g., authorization)
},
body: JSON.stringify(body), // Access data from the request body
});
console.log(await response.json());
return await response.json();
} catch (error) {
console.log(error);
return {
success: false,
message: "Something went wrong!",
};
}
};
Now when I use this AccountVerificationAction function from /account-verification/page.tsx while submitting fetch works as expected. But, I don't have any about that having a success or proper response from where I am getting: TypeError: Body is unuable
Here what I am getting:
{
success: true,
message: 'Confirmed successfully. Account is activated now.',
statusCode: 200
}
TypeError: Body is unusable
at specConsumeBody (node:internal/deps/undici/undici:4521:15)
at _Response.json (node:internal/deps/undici/undici:4425:18)
at AccountVeficationAction (webpack-internal:///(action-browser)/./src/app/auth/_utils/actions/actions.ts:76:31)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:406
at async t4 (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:6379)
at async rk (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:25934)
at async doRender (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\base-server.js:1394:30)
at async cacheEntry.responseCache.get.routeKind (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\base-server.js:1555:28)
at async DevServer.renderToResponseWithComponentsImpl (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\base-server.js:1463:28)
at async DevServer.renderPageComponent (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\base-server.js:1856:24)
at async DevServer.renderToResponseImpl (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\base-server.js:1894:32)
at async DevServer.pipeImpl (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\base-server.js:911:25)
at async NextNodeServer.handleCatchallRenderRequest (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\next-server.js:271:17)
at async DevServer.handleRequestImpl (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\base-server.js:807:17)
at async C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\dev\next-dev-server.js:331:20
at async Span.traceAsyncFn (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\trace\trace.js:151:20)
at async DevServer.handleRequest (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\dev\next-dev-server.js:328:24)
at async invokeRender (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\lib\router-server.js:163:21)
at async handleRequest (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\lib\router-server.js:342:24)
at async requestHandlerImpl (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\lib\router-server.js:366:13)
at async Server.requestListener (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\lib\start-server.js:140:13)
I have no clue so far what to do with this.
Solution
It looks like you're calling res.json()
twice. The stream has been consumed after the first one. Store the result in a variable and use that to log
and provide the return value. i.e.
console.log(await response.json());
return await response.json();
to
const responseBody = await response.json();
console.log(responseBody);
return responseBody;
Answered By - possum
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.