reactjstypescriptnext.js

TypeError: Body is unusable - NextJS Server Action POST

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;