TypeError: fetch failed / 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'

[bushidavid]

Summary

I'm having an issue with one of my API routes. When querying the API from Postman it returns Internal Server Error.

I found a related issue, that now has been closed and resolved with a PR. It seems to have been a bug on Next.js side. I have the latest version of Next.js running (13.4.19) and I already tried reproducing the error in an isolated enviroment with a very simple test API, and I get the same error in the terminal.

This is the API

`
import { NextResponse } from 'next/server';

export async function handler(req, res) {
try {

const response = {
  message: 'hello',
};

return NextResponse.json(response);

} catch (error) {
return NextResponse.error(error);
}
}
`

and this is what I get in the console

TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11600:11) at async invokeRequest (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12) at async invokeRender (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/server/lib/router-server.js:254:29) at async handleRequest (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/server/lib/router-server.js:447:24) at async requestHandler (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/server/lib/router-server.js:464:13) at async Server.<anonymous> (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/server/lib/start-server.js:117:13) { cause: RequestContentLengthMismatchError: Request body length does not match content-length header at write (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/compiled/undici/index.js:1:67105) at _resume (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/compiled/undici/index.js:1:66726) at resume (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/compiled/undici/index.js:1:65413) at [dispatch] (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/compiled/undici/index.js:1:54491) at Client.Intercept (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/compiled/undici/index.js:2:92153) at Client.dispatch (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/compiled/undici/index.js:1:105122) at [dispatch] (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/compiled/undici/index.js:2:264459) at Pool.dispatch (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/compiled/undici/index.js:1:105122) at [dispatch] (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/compiled/undici/index.js:1:29784) at Agent.Intercept (/Users/bushidavid/Documents/Projects/Bugs/polyfill-bug/node_modules/next/dist/compiled/undici/index.js:2:92153) { code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH' } }

API testing with postman keeps returning 500 - Internal Server Error.

I honestly am at a loss of what I can do.

Additional information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:21:53 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6020
    Binaries:
      Node: 20.6.1
      npm: 9.8.1
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.19
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: N/A
    Next.js Config:
      output: N/A

Example

No response

[icyJoseph]

You are using API routes in Pages Router right? Are you doing export default handler on the API route? The handler has to be the default from the module.

[bushidavid]

I am using the app dir. My folder structure is src > app > api > test > route.js

I tried adding default in the export default async GET(){} but it's still not working and getting the same error.

[bushidavid]

I'm getting something now, but because I added this

return NextResponse.json({countries: `${data}`}, {status: 200} );

But the response looks weird.

when I try to .json() the data and save in a result variable, I get again an Internal Server Error

import { PrismaClient } from "@prisma/client";
import { NextResponse } from "next/server";

const prisma = new PrismaClient();

export const dynamic = "force-dynamic";

export async function GET(req){

    try {

        const data = await prisma.country.findMany();
        const result = await data.json();
        return NextResponse.json({countries: `${result}`}, {status: 200} );
        //return NextResponse.json({ message: "Hello World" }, { status: 200 });
    } catch (error) {
        return {"message" : "there was an error"}
    }

}

[icyJoseph]

do you really need to .json() the result of findMany?

What's console.log(typeof data) or console.log(data)

I guess you just need to do:

return NextResponse.json({countries: result}, {status: 200} );

[bushidavid]

when i do

return NextResponse.json({countries: result}, {status: 200} );

I also get Internal server error for some reason;

console.log(typeof data)
shows object

I don't understand why this isn't working
return NextResponse.json({countries: data}, {status: 200} );

[icyJoseph]

Mmm and what about when you call .json on it? What's the type of that?

[bushidavid]

it doesn't log anything

could the problem be that the call with prisma is returning an object with an id of type bigint?

[bushidavid]

Issue was related to the API returning a BigInt. Implemented a function that takes the result of the API with the BigInd id, and transforms any BigInt value into a string.

const countries = data.map((country) => {
            const transformBigIntToString = (key, value) => {
              return typeof value === 'bigint' 
                ? value.toString() 
                : value;
            };
          
            // Use JSON.parse and JSON.stringify to apply the transformation
            return JSON.parse(JSON.stringify(country, transformBigIntToString));
          })

API now works from Postman and return correct result.

[icyJoseph]

Nice catch, yeah big int is not serializable:

-:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#exceptions

[janacm]

Hi I was able to resolve this by switching from fetch to axios.

For those who might not have heard of axios - it's a drop-in replacement for fetch. NextJS App router wraps fetch, and UNDICI is what fetch is NextJS calls fetch (which is in your error message), so to help isolate the issue, I switched to a different HTTP client and it worked. Doesn't have to be axios btw, many http clients exists:

Axios
Got
SuperAgent
Many more.

For a full solution, see here: https://janac.medium.com/nextjs-fails-with-und-err-req-content-length-mismatch-after-redirect-from-server-0acdc0bfb194

[freeversity]

Axios does not work in middleware, since there is no neither XMLHttpRequest nor node.js http API in Edge runtime. And there is no proper adapter for axios to use fetch instead of those.

[quochuydev]

I got the same error code, I have a router app/[...proxy], the request.headers forward to another private API.
The error code only happens when requested from an OAuth library in react-native app (content-type: application/x-www-form-urlencoded).
I solved it by deleting the header content-length and it works for me.

next@13.4.13

const headers = new Headers(request.headers);
headers.delete('content-length');

const response = await fetch(url, {
    method: request.method,
    headers,
    body,
});

[juan-carlos-correa]

This solved my issue <3

[cwooldridge1]

putting www in the url fixed it for me on node. e.g. https://google.com -> https://www.google.com