Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Undici as node fetch polyfill causes fetch failed #48744

Closed
1 task done
kaloyanBozhkov opened this issue Apr 23, 2023 · 34 comments
Closed
1 task done

Using Undici as node fetch polyfill causes fetch failed #48744

kaloyanBozhkov opened this issue Apr 23, 2023 · 34 comments
Labels
bug Issue was opened via the bug report template. Pages Router Related to Pages Router.

Comments

@kaloyanBozhkov
Copy link

kaloyanBozhkov commented Apr 23, 2023

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

Data fetching (gS(S)P, getInitialProps)

Link to the code that reproduces this issue

return (global as any).__NEXT_USE_UNDICI

To Reproduce

Ensure project is using serverless functions that are from the frankfurt network (so far I know this one causes the problem, but maybe others do as well)
image

Below are my steps, but they should be entirely optional since replicating this is possible in different ways.

  1. have a next api endpoint that fires a tRCP call using tRPC's client

  2. call the endpoint

  3. observe that fetch failed because of undici (node fetch polyfill)

Describe the Bug

Big thanks to TillaTheHun0 for reporting this.

I want to make a bug report since I replicated and can confirm his thesis.

Next has a node polyfill for fetch, which uses either undici or node-fetch depending on an environment variable called __NEXT_USE_UNDICI. This env variable is likely set by Vercel depending on which network the Serverless Functions are configured to execute on.

I tested countless times, and the thing that solved my problems was indeed changing the network location of my serverless functions in my Project Settings on Vercel.

Undici currently has some issue (RequestContentLengthMismatchError), partially documented here. This issue is causing all sorts of problems from different places since this fetch polyfill is used by many other tools.

In my case it was tRPC complaining, with:

 TRPCClientError: fetch failed
    at TRPCClientError.from (file:///var/task/node_modules/@trpc/client/dist/transformResult-6fb67924.mjs:13:16)
    at file:///var/task/node_modules/@trpc/client/dist/links/httpBatchLink.mjs:211:64 {
  meta: undefined,
  shape: undefined,
  data: undefined,
  [cause]: TypeError: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:14062:11) {
    cause: RequestContentLengthMismatchError: Request body length does not match content-length header
        at AsyncWriter.end (node:internal/deps/undici/undici:9704:19)
        at writeIterable (node:internal/deps/undici/undici:9614:16) {
      code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
    }
  }
}

though I read around different places people encountering the same problem in various ways.

We should either use only one polyfill (the working one) while waiting for undici to be patched, or we should allow people to explicitly choose which polyfill they'd like through configuring __NEXT_USE_UNDICI somewhere. Though I have a feeling that going with either option could be impossible if there's unknown limitations to the machine running the Functions that make it so undici is chosen over node-fetch.

Regardless, it is currently a fact that the "Project Settings" > "Functions" page (on Vercel) does not have any information about this behaviour. At the very least we should inform users that there's environment variables that could change depending on the chosen region for the Serverless Functions. Optimally we should provide a list with environment variables and their configuration for the different regions, and ideally also how these map to certain behaviours. At the very least this would speed up debugging and problem solving IMO. (this part might not be specific to the Next repo though)

Expected Behavior

fetch requests should not fail like this, regardless of which serverless function they are running on.

Which browser are you using? (if relevant)

N/A

How are you deploying your application? (if relevant)

N/A

@jackycymo
Copy link

+1 to this. I'm on 14.0.5-canary and getting this error on Vercel during build.

I'm using Apollo Client Nextjs for useSuspenseQuery() / rsc query in static pages and the error happens during build when pre-rendering the page.

This error doesn't happen in local dev env.

ApolloError: fetch failed
--
20:39:09.889 | at new ApolloError (/vercel/path0/app/.next/server/chunks/7756.js:120721:28)
20:39:09.889 | at /vercel/path0/app/.next/server/chunks/7756.js:120181:19
20:39:09.890 | at both (/vercel/path0/app/.next/server/chunks/7756.js:124244:53)
20:39:09.890 | at /vercel/path0/app/.next/server/chunks/7756.js:124237:72
20:39:09.890 | at new Promise (<anonymous>)
20:39:09.890 | at Object.then (/vercel/path0/app/.next/server/chunks/7756.js:124237:24)
20:39:09.890 | at Object.error (/vercel/path0/app/.next/server/chunks/7756.js:124245:49)
20:39:09.890 | at notifySubscription (/vercel/path0/app/.next/server/chunks/7756.js:93242:18)
20:39:09.890 | at onNotify (/vercel/path0/app/.next/server/chunks/7756.js:93281:3)
20:39:09.890 | at SubscriptionObserver.error (/vercel/path0/app/.next/server/chunks/7756.js:93342:7) {
20:39:09.890 | graphQLErrors: [],
20:39:09.890 | protocolErrors: [],
20:39:09.890 | clientErrors: [],
20:39:09.890 | networkError: TypeError: fetch failed
20:39:09.890 | at Object.fetch (/vercel/path0/app/node_modules/next/dist/compiled/undici/index.js:1:26669) {
20:39:09.890 | cause: RequestContentLengthMismatchError: Request body length does not match content-length header
20:39:09.890 | at AsyncWriter.end (/vercel/path0/app/node_modules/next/dist/compiled/undici/index.js:1:71966)
20:39:09.890 | at writeIterable (/vercel/path0/app/node_modules/next/dist/compiled/undici/index.js:1:70638) {
20:39:09.890 | code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
20:39:09.890 | }
20:39:09.890 | },
20:39:09.891 | extraInfo: undefined
20:39:09.891 | }

@kaloyanBozhkov
Copy link
Author

+1 to this. I'm on 14.0.5-canary and getting this error on Vercel during build.

I'm using Apollo Client Nextjs for useSuspenseQuery() / rsc query in static pages and the error happens during build when pre-rendering the page.

This error doesn't happen in local dev env.

ApolloError: fetch failed
--
20:39:09.889 | at new ApolloError (/vercel/path0/app/.next/server/chunks/7756.js:120721:28)
20:39:09.889 | at /vercel/path0/app/.next/server/chunks/7756.js:120181:19
20:39:09.890 | at both (/vercel/path0/app/.next/server/chunks/7756.js:124244:53)
20:39:09.890 | at /vercel/path0/app/.next/server/chunks/7756.js:124237:72
20:39:09.890 | at new Promise (<anonymous>)
20:39:09.890 | at Object.then (/vercel/path0/app/.next/server/chunks/7756.js:124237:24)
20:39:09.890 | at Object.error (/vercel/path0/app/.next/server/chunks/7756.js:124245:49)
20:39:09.890 | at notifySubscription (/vercel/path0/app/.next/server/chunks/7756.js:93242:18)
20:39:09.890 | at onNotify (/vercel/path0/app/.next/server/chunks/7756.js:93281:3)
20:39:09.890 | at SubscriptionObserver.error (/vercel/path0/app/.next/server/chunks/7756.js:93342:7) {
20:39:09.890 | graphQLErrors: [],
20:39:09.890 | protocolErrors: [],
20:39:09.890 | clientErrors: [],
20:39:09.890 | networkError: TypeError: fetch failed
20:39:09.890 | at Object.fetch (/vercel/path0/app/node_modules/next/dist/compiled/undici/index.js:1:26669) {
20:39:09.890 | cause: RequestContentLengthMismatchError: Request body length does not match content-length header
20:39:09.890 | at AsyncWriter.end (/vercel/path0/app/node_modules/next/dist/compiled/undici/index.js:1:71966)
20:39:09.890 | at writeIterable (/vercel/path0/app/node_modules/next/dist/compiled/undici/index.js:1:70638) {
20:39:09.890 | code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
20:39:09.890 | }
20:39:09.890 | },
20:39:09.891 | extraInfo: undefined
20:39:09.891 | }

Someone even made a demo showcasing this issue, bless them

vercel/vercel#9690 (comment)

@julioxavierr
Copy link

Any known workaround for this?

@nevolgograd
Copy link

@julioxavierr using node-fetch solves this problem, but unfortunately it doesn't fit well as next fetch do.

@croossin
Copy link

croossin commented Jul 3, 2023

Ran into similar issues - weirdly enough in iad1 Washington. After some googling, I stumbled across this article which recommended using fetch-ponyfill'. This fixed the issue for me.

@kaloyanBozhkov
Copy link
Author

Ran into similar issues - weirdly enough in iad1 Washington. After some googling, I stumbled across this article which recommended using fetch-ponyfill'. This fixed the issue for me.

I wrote that, you're welcome :))

@julioxavierr
Copy link

Thanks @kaloyanBozhkov and @nevolgograd for this!

Unfortunately, it didn't solve my problem. I have an app with a middleware/auth layer using next-auth that also appears to use undici underneath. Did you encounter anything similar?

@karl-run
Copy link

karl-run commented Jul 6, 2023

I' m also seeing this error, but it seems to be in the context of a server action failing to redirect.

I have a server action that does this:

'use server'

export async function exampleAction() {
    const token = getToken(headers())

    await asyncFunction(...)

    redirect('/some-path')
}

Which throws:

failed to get redirect response TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11) {
  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at write (<app>/node_modules/next/dist/compiled/undici/index.js:1:67105)
      at _resume (<app>/node_modules/next/dist/compiled/undici/index.js:1:66726)
      at resume (<app>/node_modules/next/dist/compiled/undici/index.js:1:65413)
      at connect (<app>/node_modules/next/dist/compiled/undici/index.js:1:65301) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
  }
}

@wladpaiva
Copy link

Also having this issue in the redirect. I've created a reproduction here
https://github.com/wladiston/reproduction-next-fetch-bug

It seems like if I pin next to 13.4.7 the error goes away.

@masterkain
Copy link

masterkain commented Jul 8, 2023

I started to see this too in server actions

  async function handleForm(formData: FormData) {
    'use server';
    const { error } = await updateProject(projectId, formData);

    const errorParam = error ? `&errorMessage=${error}` : '';
    redirect(`/projects/${projectId}/edit?tab=edit${errorParam}`);
  }
failed to get redirect response TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11522:11) {
  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at write (/app/node_modules/next/dist/compiled/undici/index.js:1:67105)
      at _resume (/app/node_modules/next/dist/compiled/undici/index.js:1:66726)
      at resume (/app/node_modules/next/dist/compiled/undici/index.js:1:65413)
      at connect (/app/node_modules/next/dist/compiled/undici/index.js:1:65301) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
  }
}

content-length is 2 on the response but body is empty

Screenshot 2023-07-08 at 06 25 41

@pavlovtech
Copy link

I'm having the same issue with a redirect inside a server action

@duylevietluu
Copy link

I'm having the same issue as well.

@andersbss
Copy link

andersbss commented Jul 18, 2023

Same issue calling fetch in getServerSideProps using pages directory.

Function Region: Stockholm, Sweden (North) - arn1
Next version: 13.4.10
Node version: 18

TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11457:11)
at async ssrFetch (/var/task/dist/apps/hse/.next/server/chunks/9405.js:954:17)
at async ssrFetchTmp (/var/task/dist/apps/hse/.next/server/chunks/3332.js:407:17)
at async getServerSideProps.userTypes (/var/task/dist/apps/hse/.next/server/pages/revisions/[id].js:452:13) {
cause: RequestContentLengthMismatchError: Request body length does not match content-length header
at AsyncWriter.end (node:internal/deps/undici/undici:10241:19)
at writeIterable (node:internal/deps/undici/undici:10149:16) {
code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
}
}
Error name: TypeError

@aerinkim
Copy link

aerinkim commented Jul 23, 2023

facing the same issue in simple api writing to vercel postgres.

fetch failed: TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11)
at async logObject (webpack-internal:///./pages/evalResult.tsx:44:26) {
cause: RequestContentLengthMismatchError: Request body length does not match content-length header
at AsyncWriter.end (/Users/aerinkim/Projects/lemma/node_modules/next/dist/compiled/undici/index.js:1:71966)
at writeIterable (/Users/aerinkim/Projects/lemma/node_modules/next/dist/compiled/undici/index.js:1:70638) {
code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
}
}

"next": "13.4.7",
$ node -v
v18.15.0

@rumrum28
Copy link

same issue here

failed to get redirect response TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11) {
cause: RequestContentLengthMismatchError: Request body length does not match content-length header
at write (C:\Users\Administrator\Desktop\Code\Next TUT\pryce-next\node_modules\next\dist\compiled\undici\index.js:1:67105)
at _resume (C:\Users\Administrator\Desktop\Code\Next TUT\pryce-next\node_modules\next\dist\compiled\undici\index.js:1:66726)
at resume (C:\Users\Administrator\Desktop\Code\Next TUT\pryce-next\node_modules\next\dist\compiled\undici\index.js:1:65413)
at connect (C:\Users\Administrator\Desktop\Code\Next TUT\pryce-next\node_modules\next\dist\compiled\undici\index.js:1:65301) {
code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
}
}

@Gbuomprisco
Copy link

I am also seeing the same issue when redirecting to a page from a server action

@lorenzoa7
Copy link

I'm facing the same issue here

@24jr
Copy link

24jr commented Jul 28, 2023

I am using fetch in a sveltekit server func and having I think this same issue

@mqschwanda
Copy link

mqschwanda commented Jul 31, 2023

I ran into this same issue when using redirect() inside a server action. I walked through a few Next versions to see where I would get the fix. I was finally able to solve this by downgrading Next as follows:

- "next": "^13.4.12",
+ "next": "13.4.7",

I have tested this fix with the development server inside a node:latest (v20.5.0) docker container and I am no longer runing into the error.

@mihaiandrei97
Copy link

I ran into this same issue when using redirect() inside a server action. I walked through a few Next versions to see where I would get the fix. I was finally able to solve this by downgrading Next as follows:

- "next": "^13.4.12",
+ "next": "13.4.7",

I have tested this fix with the development server inside a node:latest (v20.5.0) docker container and I am no longer runing into the error.

+1 on this. Also having an issue while redirecting from a server action. Downgrading to 13.4.7 seems to fix it

@raflymln
Copy link

raflymln commented Aug 7, 2023

+1, needs to be fixed ASAP

@rudden
Copy link

rudden commented Aug 8, 2023

Same issue here. Works on 13.4.7 but not on 13.4.13 (using signIn function from next-auth on a custom login page).

@michaellukeread
Copy link

Same issue with me - downgrading to 13.4.7 fixed it.

@davecarlson
Copy link
Contributor

This started for me today too on 13.4.13

@ChoaibMouhrach
Copy link

ChoaibMouhrach commented Aug 9, 2023

Today, I encountered the identical error using version 13.4.13. While working in Postman, I unintentionally included a body in a GET request to my API handler. Consequently, the server produced the same error as mentioned by others earlier.

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at async invokeRequest (/home/camado/Desktop/coding/frameworks/next/yeralibrary/node_modules/.pnpm/next@13.4.13_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:21:12)
    at async requestHandler (/home/camado/Desktop/coding/frameworks/next/yeralibrary/node_modules/.pnpm/next@13.4.13_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/start-server.js:336:33)
    at async Server.<anonymous> (/home/camado/Desktop/coding/frameworks/next/yeralibrary/node_modules/.pnpm/next@13.4.13_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/start-server.js:152:13) {
  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at write (node:internal/deps/undici/undici:9949:41)
      at _resume (node:internal/deps/undici/undici:9927:33)
      at resume (node:internal/deps/undici/undici:9829:7)
      at connect (node:internal/deps/undici/undici:9818:7) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
  }
}

Solution

Downgrading to version 13.4.7 solved the issue

@0xc00010ff
Copy link

Getting this locally when cloning the Supabase template https://vercel.com/templates/next.js/supabase. Reproducible on the login page which calls the form actions. 13.4.13

Screen Shot 2023-08-09 at 9 50 43 PM

Screen Shot 2023-08-09 at 9 51 01 PM

@jstlaurent
Copy link

I'm also getting the same error when sending a DELETE request with a Content-Length: 0 header, on 13.4.13.

This is the stacktrace:

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at async invokeRequest (/Users/julien/projects/valence/polaris-hub/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:21:12)
    at async requestHandler (/Users/julien/projects/valence/polaris-hub/node_modules/next/dist/server/lib/start-server.js:336:33)
    at async Server.<anonymous> (/Users/julien/projects/valence/polaris-hub/node_modules/next/dist/server/lib/start-server.js:152:13) {
  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at write (node:internal/deps/undici/undici:9949:41)
      at _resume (node:internal/deps/undici/undici:9927:33)
      at resume (node:internal/deps/undici/undici:9829:7)
      at connect (node:internal/deps/undici/undici:9818:7) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
  }
}

Downgrading to 13.4.7 solves it.

Might be related to #51874, that landed in 13.4.8?

@davecarlson
Copy link
Contributor

I have an inbound PR that fixes it

#53843

@timneutkens
Copy link
Member

@davecarlson's PR was landed on stable 👍

@switz
Copy link

switz commented Aug 15, 2023

Seeing lots of undici issues across multiple projects on latest next and latest node 18:

Node.js v18.17.1
Static worker unexpectedly exited with code: 1 and signal: null
[    ] - info Generating static pages (3/9)node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

TypeError: terminated
    at Fetch.onAborted (node:internal/deps/undici/undici:11442:53)
    at Fetch.emit (node:events:514:28)
    at Fetch.terminate (node:internal/deps/undici/undici:10695:14)
    at Object.onError (node:internal/deps/undici/undici:11537:36)
    at Request.onError (node:internal/deps/undici/undici:8310:31)
    at errorRequest (node:internal/deps/undici/undici:10378:17)
    at Socket.onSocketClose (node:internal/deps/undici/undici:9811:9)
    at Socket.emit (node:events:514:28)
    at TCP.<anonymous> (node:net:323:12)
    at TCP.callbackTrampoline (node:internal/async_hooks:130:17) {
  [cause]: Error: write EPIPE
      at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:94:16)
      at WriteWrap.callbackTrampoline (node:internal/async_hooks:130:17)
}

Node.js v18.17.1
node:internal/deps/undici/undici:11576
    Error.captureStackTrace(err, this);
          ^

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11) {
  cause: Error: write EPIPE
      at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:94:16)
      at WriteWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -32,
    code: 'EPIPE',
    syscall: 'write'
  }
}

@timneutkens
Copy link
Member

Keep in mind that Undici is the underlying name of fetch() in Node.js, so any error mentioning it could come from your own code as well. If you can provide a reproduction in a new issue we can have a look if it's something in Next.js.

@pashazel

This comment was marked as off-topic.

@thien-do

This comment was marked as off-topic.

@raflymln

This comment was marked as off-topic.

@vercel vercel locked as off-topic and limited conversation to collaborators Aug 28, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. Pages Router Related to Pages Router.
Projects
None yet
Development

No branches or pull requests