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;