"TypeError: fetch failed" is an incomplete error: `fetch` in Server Component, if throws and isn't caught, loses info #49896

tomsseisums · 2023-05-17T07:19:13Z

Verify canary release

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

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant packages:
      next: 13.4.3-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5

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

App directory (appDir: true)

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/next-js-server-components-fetch-incomplete-error-if-uncaught-o09yqm

To Reproduce

In server component, try to load data from an non-existent URL without try/catch.

await fetch('http://127.0.0.1:1337/non-existent')

Describe the Bug

The terminal logs just:

TypeError: fetch failed

And with next dev, it will be surfaced to frontend with just the same:

Unhandled runtime error
TypeError: fetch failed

If I include my own error.tsx and try to destructure the error into const { name, message, trace, cause, ...rest } = error, it will still be incomplete, having only name and message (and digest in ...rest), and there the name even will be dropped from TypeError to just Error.

Related: #44062, but there the focus isn't on error being incomplete, rather that it happens at all.

The issue seems that it only surfaces first line for low-level errors (ECONNREFUSED etc.). Which is why the #44062 seems like a mysterious thing, albeit if you look inside, you'd see that it's the localhost resolving to ::1 IPv6 issue at most cases.

Expected Behavior

Given I try/catch and console.error('FULL ERROR', e) the error and get this out:

FULL ERROR:  TypeError: fetch failed
    at Object.fetch (/project/sandbox/node_modules/next/dist/compiled/undici/index.js:1:26669)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:1337
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1247:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 1337
  }
}

I would expect this to be shown by default in terminal logs. Without me having to try/catch + console.error to see the details.
I would expect the error.tsx to also have the full info available, as it is for any other (although with this I'm not sure) uncaught exception in Server Component.
I would expect the Error surfaced to error.tsx not to lose it's name (error.tsx shows Error instead of TypeError).

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

The text was updated successfully, but these errors were encountered:

tomsseisums · 2023-05-17T07:55:38Z

This seems to have been introduced with v13.2 with the new error - <error> output, in v13.1 without error - <error> the error is displayed in full in server terminal. error.tsx still receives incomplete info, though.

Here is sandbox with 13.1, but otherwise same environment: https://codesandbox.io/p/sandbox/next-js-server-components-fetch-complete-error-if-uncaught-13-1-yvot4e

    Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant packages:
      next: 13.1.6
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

tomsseisums · 2023-05-17T08:01:33Z

I think that might be this PR: #45472
cc: @hanneslund

Athrun-Judah · 2023-05-18T07:08:27Z

I had the same problem in the server component.

kaloyanBozhkov · 2023-05-24T12:18:54Z

I've documented this as well
#48744

maciejadamski89 · 2023-05-24T12:57:10Z

Same for me - can't fetch from server component. From client component there are no any problems.
Change request url from localhost:8000 to 127.0.0.1:8000 solved my problem.

MoncefDeveloper · 2023-05-25T11:33:26Z

same problem
Changing 'localhost' to '127.0.0.1', still causes the same problem.
add dns.setDefaultResultOrder('ipv4first') to my app, still the same problem.

gempi · 2023-05-25T14:37:53Z

@MoncefDeveloper have you tried to update to v13.4.4-canary.9 according to #50298 (comment)?

MoncefDeveloper · 2023-05-25T23:37:32Z

@MoncefDeveloper have you tried to update to v13.4.4-canary.9 according to #50298 (comment)?

thanks Gempi. I updated my app to 13.4.4 but still faced the same error.
after that, I tried to switch the node to 16! still showing me the same error
I tried almost every solution :')

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3000
  }
}
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3000
  }
}
/item/....
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3000
  }
}
TypeError: fetch failed
    ....
    ....
    ....

Gr33nLight · 2023-06-08T11:22:57Z

I tried almost every solution :')

Heyyyyyyy did you manage to find a solution to this?

myzsqn · 2023-06-12T00:50:52Z

I fixed this issue by ensuring that my endpoint URL was not involved in a redirect.

My example:

website.io was redirecting to www.website.io

Thus removing the Content-Length

#nodejs/undici#2046 (comment)

Hope it helps

hrdwdmrbl · 2023-07-10T22:32:15Z

Just in case people are missing it, the original author's "Expected Behavior" section gives a good workaround: try/catch your fetches for now.

Sumitmaithani · 2023-07-23T15:50:44Z

I also getting this error on next@13.4.12 everything works fine on locally but getting this error on deployment in vercel.

changed localhost:3000 to 127.0.0.1:3000 not worked

Want to see my code details https://github.com/Sumitmaithani/competency-passbook

Error loading courses:  TypeError: fetch failed
--
20:25:18.646 | at Object.fetch (node:internal/deps/undici/undici:11457:11)
20:25:18.646 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
20:25:18.647 | cause: Error: connect ECONNREFUSED 127.0.0.1:3000
20:25:18.647 | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
20:25:18.647 | at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
20:25:18.648 | errno: -111,
20:25:18.649 | code: 'ECONNREFUSED',
20:25:18.649 | syscall: 'connect',
20:25:18.657 | address: '127.0.0.1',
20:25:18.657 | port: 3000
20:25:18.657 | }

anthonytison · 2023-07-23T16:11:47Z

Hey,
I'm not using the appDir functionality yet so for fixing that issue i had to modify the next.config.js by

turning off the appDir

experimental: {
   appDir: false
 },

forcing ip4 on the server

const dns = require('dns');
dns.setDefaultResultOrder("ipv4first");

I hope it will give you some ideas if it doesn't help you.

em1l1000 · 2023-08-09T13:56:58Z

I have this issue in next.js version 13.4.13 as well (node 20.4.9). Is there a fix in the pipeline?

Sumitmaithani · 2023-08-09T15:00:11Z

I solved this error checkout this code for understanding https://github.com/Sumitmaithani/competency-passbook in short you don't need to write full link like http://localhost:3000/ or something in start just start by /api/whateveryouwant and use axios for api requests in place of fetch. This solved my problem.

DevEmmy · 2023-08-23T08:28:45Z

Currently, I'm experiencing this issue on my linux duing development.
Is there any solution yet?

andy-leezard · 2023-08-31T23:52:12Z

I am having this issue as well, with errorno: -4078 and code: 'ECONNREFUSED' starting with TypeError: fetch failed...,
always followed by The server is running out of memory, restarting to free up memory.

(Every time this error occurs, I see different value on Port:xxx but the rest is always the same with node:internal/deps/undici...

Node version tested (all having same issues): 16.20.2, 18.17.1, 20.5.1
NextJS version tested (all having same issues): 13.4.6, 13.4.19
Package Manager: pnpm 8.7.1
Typescript version: 5.2.2

Project dependencies:

"dependencies": {
    "@adobe/react-spectrum": "^3.29.0",
    "@formatjs/intl-localematcher": "^0.4.0",
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@reduxjs/toolkit": "^1.9.5",
    "@tailwindcss/forms": "^0.5.5",
    "@types/negotiator": "^0.6.1",
    "@types/node": "^20.5.9",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "async-mutex": "^0.4.0",
    "autoprefixer": "^10.4.15",
    "classnames": "^2.3.2",
    "client-only": "^0.0.1",
    "encoding": "^0.1.13",
    "eslint": "^8.48.0",
    "eslint-config-next": "13.4.19",
    "negotiator": "^0.6.3",
    "next": "13.4.19",
    "next-auth": "^4.23.1",
    "next-themes": "^0.2.1",
    "postcss": "^8.4.28",
    "react": "18.2.0",
    "react-aria": "^3.27.0",
    "react-country-flag": "^3.1.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.10.1",
    "react-redux": "^8.1.2",
    "react-stately": "^3.25.0",
    "react-toastify": "^9.1.3",
    "react-tooltip": "^5.21.1",
    "server-only": "^0.0.1",
    "styled-components": "6.0.7",
    "tailwindcss": "^3.3.3",
    "typescript": "5.2.2"
  }

The deployed web app seems to be running fine but in the dev env, I constantly encounter this server crash error when HMR occurs (on code change), about every 20 minutes or so.

These are all kinds of attempts I made so far to solve this issue.

Tried removing all cache in .next folder and re-run; no luck.
Explicitly specified the Hostname and the port when running the dev server: npx next dev -H 127.0.0.1 -p 3000 or npx next dev -H 0.0.0.0 -p 3000; no luck.
Use '127.0.0.1:8000' instead of 'http://localhost:8000' as part of my api endpoint of local backend server; no luck.

Edited: The error message is a bit different in Next 13.4.6 or lower

Elvincth · 2023-09-08T20:25:50Z

Same random error appear using app dir with next.js v13.4.19

TheKenoCode · 2023-09-11T02:39:15Z

Same random error appear using app dir with next.js v13.4.19

same here >:(

adanperez · 2023-09-11T02:51:33Z

In my case I was using fetch to call a service with a bad/unkown certificate. I had to capture the fetch error and log it out to see what the actual issue was. Worth looking at NODE_TLS_REJECT_UNAUTHORIZED=0 if doing local development.

karlhorky · 2023-09-11T16:00:19Z

Seems similar to what's happening over here:

next js 13 server error " TypeError: fetch failed " #54961

karlhorky · 2023-09-11T16:19:07Z

For all the people who have been reporting that it happens with Next.js v13.4.19, please upgrade to the latest canary on the Releases page (currently 13.4.20-canary.23) and try again - this will be helpful to see if the problem still occurs

(I am also experiencing this issue on the latest canary personally, but would be good to get some other data points)

LiorDueto · 2023-09-11T17:43:16Z

I am having this issue as well, with errorno: -4078 and code: 'ECONNREFUSED' starting with TypeError: fetch failed..., always followed by The server is running out of memory, restarting to free up memory.

(Every time this error occurs, I see different value on Port:xxx but the rest is always the same with node:internal/deps/undici...

Node version tested (all having same issues): 16.20.2, 18.17.1, 20.5.1 NextJS version tested (all having same issues): 13.4.6, 13.4.19 Package Manager: pnpm 8.7.1 Typescript version: 5.2.2

...
The deployed web app seems to be running fine but in the dev env, I constantly encounter this server crash error when HMR occurs (on code change), about every 20 minutes or so.

These are all kinds of attempts I made so far to solve this issue.

Tried removing all cache in .next folder and re-run; no luck.

Explicitly specified the Hostname and the port when running the dev server: npx next dev -H 127.0.0.1 -p 3000 or npx next dev -H 0.0.0.0 -p 3000; no luck.

Use '127.0.0.1:8000' instead of 'http://localhost:8000' as part of my api endpoint of local backend server; no luck.

Edited: The error message is a bit different in Next 13.4.6 or lower

We also encountered similar 'out of memory', 'fetch' errors and eventual crashes (13.4.19).
Disabling image optimization solved this for us and server memory in production has become more stable.
Just add images: { unoptimized: true} to next configuration

parthy007 · 2023-09-13T20:04:33Z

Gettiing this below error when trying to build my nextjs project, i tried chaging the localhost to 127.0.0.1 in the env but it's not working, It would be great if anybody can help me get through this error.

My Versions:
next - 13.4.19
node - 18.17.1

TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11576:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
cause: Error: connect ECONNREFUSED 127.0.0.1:3000
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16)
at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
errno: -4078,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '127.0.0.1',
port: 3000
}
}

Error occurred prerendering page "/blog". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11576:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

info Generating static pages (13/13)

Export encountered errors on following paths:
/blog/page: /blog

Zakisb · 2023-09-17T09:38:32Z

Having the same issue too !

guanyu-y · 2023-09-19T13:24:56Z

Yes... I am facing the same problem with my own project. so I am using axios' fetch API as the alternative, which works fine...
But I don't find out what the difference is between the two. 🤔

karlhorky · 2023-09-19T13:55:24Z

Check out my comment from the other issue (54961):

I upgraded to next@13.4.20-canary.35 and we have also not experienced the fetch errors / crashing since then... 👀 🤔

I will keep an eye on this, but maybe this has been fixed

Try upgrading to the latest canary and see if it helps your project 👍

timomedia · 2023-09-22T01:28:57Z

Try upgrading to the latest canary and see if it helps your project

I tried updating to version 13.5.2 but still get the same error. It will randomly display a few endpoints

MAhmedSid · 2023-10-08T16:40:14Z

I solved this by removing all redirect domains in Vercel, and by adding "www" in the fetch request url.
nodejs/undici#2046

AatifxShaikh · 2023-10-15T09:00:50Z

    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3000
  }
}
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3000
  }
}

facing the same error as well in my the login page seems to be working fine but the server component provides the
Application error: a server-side exception has occurred (see the server logs for more information). error.

Update:
I tried adding the vercial dmain link that you will get for the app after deployment to all the fetch request instead of the local host example
https://app-name.vercel.app
And it seems to work.

Rivalakmalll · 2023-10-26T12:33:59Z

have same issue with this eror output

TypeError: fetch failed

19:15:38.229 | at Object.fetch (node:internal/deps/undici/undici:11576:11)
19:15:38.229 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
19:15:38.230 | cause: Error: connect ECONNREFUSED 127.0.0.1:3000
19:15:38.230 | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16)
19:15:38.230 | at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
19:15:38.230 | errno: -111,
19:15:38.230 | code: 'ECONNREFUSED',
19:15:38.231 | syscall: 'connect',
19:15:38.231 | address: '127.0.0.1',
19:15:38.231 | port: 3000
19:15:38.231 | }
19:15:38.231 | }
19:15:38.232 | TypeError: Cannot read properties of undefined (reading 'json')
19:15:38.233 | at profileFetcher (/vercel/path0/.next/server/app/open-source/page.js:411:41)
19:15:38.233 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
19:15:38.233 | at async OpenSourcePage (/vercel/path0/.next/server/app/open-source/page.js:472:21)
19:15:38.244 |
19:15:38.244 | Error occurred prerendering page "/open-source". Read more: https://nextjs.org/docs/messages/prerender-error
19:15:38.244 | TypeError: Cannot read properties of undefined (reading 'json')
19:15:38.245 | at profileFetcher (/vercel/path0/.next/server/app/open-source/page.js:411:41)
19:15:38.245 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
19:15:38.245 | at async OpenSourcePage (/vercel/path0/.next/server/app/open-source/page.js:472:21)
19:15:38.285 | TypeError: fetch failed
19:15:38.290 | at Object.fetch (node:internal/deps/undici/undici:11576:11)
19:15:38.291 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
19:15:38.291 | cause: Error: connect ECONNREFUSED 127.0.0.1:3000
19:15:38.291 | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16)
19:15:38.291 | at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
19:15:38.291 | errno: -111,
19:15:38.291 | code: 'ECONNREFUSED',
19:15:38.291 | syscall: 'connect',
19:15:38.291 | address: '127.0.0.1',
19:15:38.291 | port: 3000
19:15:38.291 | }
19:15:38.291 | }
19:15:38.296 |
19:15:38.296 | Error occurred prerendering page "/spotify". Read more: https://nextjs.org/docs/messages/prerender-error
19:15:38.296 | TypeError: fetch failed
19:15:38.296 | at Object.fetch (node:internal/deps/undici/undici:11576:11)
19:15:38.296 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
19:15:38.297 | - info Generating static pages (13/13)
19:15:38.302 |
19:15:38.303 | > Export encountered errors on following paths:
19:15:38.303 | /open-source/page: /open-source
19:15:38.303 | /spotify/page: /spotify
19:15:38.363 | error Command failed with exit code 1.
19:15:38.365 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
19:15:38.386 | Error: Command "yarn run build" exited with 1

eademir · 2023-10-27T01:01:35Z

async function getData() {
const res = await fetch('https://localhost:8080/api/v1/posts')
// The return value is not serialized
// You can return Date, Map, Set, etc.

if (!res.ok) {
// This will activate the closest error.js Error Boundary
throw new Error('Failed to fetch data')
}

return res.json()
}

export default async function Page() {
const data = await getData()

return

...
}

I've got this from here yet getting the same error.

MAhmedSid · 2023-10-27T03:43:32Z

This error is generating, because you are trying to fetch from local api in server component. Because of app is not completely build, the server components are not able to find it. This error usually occurs at build time.

SOLUTION: The solution is tha don't call local api inside server component instead of direct fetch data from resource url in the server component.

eademir · 2023-11-04T01:54:51Z

This error is generating, because you are trying to fetch from local api in server component. Because of app is not completely build, the server components are not able to find it. This error usually occurs at build time.

SOLUTION: The solution is tha don't call local api inside server component instead of direct fetch data from resource url in the server component.

I guess, you are wrong. Do you have any example?

I tried localhost:8080 and localhost (pass_proxy to :8080 via nginx) no luck. but if I send a request via browser or postman or terminal I can get the json I need. This is only occurs when I use npm run build but there is no any problem with npm run dev, too. By the way, the app is completely built and running in a container with docker compose.

EDIT: I fixed it by changing the URL that I was misusing. Instead of http://localhost:8080/... or http://localhost/... or 127.0.0.1:8080...... etc. I put http://<container_name>:8080/.... I was treating it as a client-side request by mistake.

MAhmedSid · 2023-11-04T02:00:00Z

Now It is officially documented in a Next Js docs that it is better to fetch data from direct source instead of using local api route in Server components. Because at build time Server components will not able tofind those routes which are not still built yet. And you can refer the examples there.

It works in dev env because dev server don't create pre rendered static pages.

ddikodroid · 2023-11-09T03:46:17Z

Now It is officially documented in a Next Js docs that it is better to fetch data from direct source instead of using local api route in Server components. Because at build time Server components will not able tofind those routes which are not still built yet. And you can refer the examples there.

It works in dev env because dev server don't create pre rendered static pages.

could you share the link that point to the docs?

AatifxShaikh · 2023-11-09T04:51:44Z

have same issue with this eror output

TypeError: fetch failed

19:15:38.229 | at Object.fetch (node:internal/deps/undici/undici:11576:11) 19:15:38.229 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { 19:15:38.230 | cause: Error: connect ECONNREFUSED 127.0.0.1:3000 19:15:38.230 | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) 19:15:38.230 | at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) { 19:15:38.230 | errno: -111, 19:15:38.230 | code: 'ECONNREFUSED', 19:15:38.231 | syscall: 'connect', 19:15:38.231 | address: '127.0.0.1', 19:15:38.231 | port: 3000 19:15:38.231 | } 19:15:38.231 | } 19:15:38.232 | TypeError: Cannot read properties of undefined (reading 'json') 19:15:38.233 | at profileFetcher (/vercel/path0/.next/server/app/open-source/page.js:411:41) 19:15:38.233 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 19:15:38.233 | at async OpenSourcePage (/vercel/path0/.next/server/app/open-source/page.js:472:21) 19:15:38.244 | 19:15:38.244 | Error occurred prerendering page "/open-source". Read more: https://nextjs.org/docs/messages/prerender-error 19:15:38.244 | TypeError: Cannot read properties of undefined (reading 'json') 19:15:38.245 | at profileFetcher (/vercel/path0/.next/server/app/open-source/page.js:411:41) 19:15:38.245 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 19:15:38.245 | at async OpenSourcePage (/vercel/path0/.next/server/app/open-source/page.js:472:21) 19:15:38.285 | TypeError: fetch failed 19:15:38.290 | at Object.fetch (node:internal/deps/undici/undici:11576:11) 19:15:38.291 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { 19:15:38.291 | cause: Error: connect ECONNREFUSED 127.0.0.1:3000 19:15:38.291 | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) 19:15:38.291 | at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) { 19:15:38.291 | errno: -111, 19:15:38.291 | code: 'ECONNREFUSED', 19:15:38.291 | syscall: 'connect', 19:15:38.291 | address: '127.0.0.1', 19:15:38.291 | port: 3000 19:15:38.291 | } 19:15:38.291 | } 19:15:38.296 | 19:15:38.296 | Error occurred prerendering page "/spotify". Read more: https://nextjs.org/docs/messages/prerender-error 19:15:38.296 | TypeError: fetch failed 19:15:38.296 | at Object.fetch (node:internal/deps/undici/undici:11576:11) 19:15:38.296 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 19:15:38.297 | - info Generating static pages (13/13) 19:15:38.302 | 19:15:38.303 | > Export encountered errors on following paths: 19:15:38.303 | /open-source/page: /open-source 19:15:38.303 | /spotify/page: /spotify 19:15:38.363 | error Command failed with exit code 1. 19:15:38.365 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 19:15:38.386 | Error: Command "yarn run build" exited with 1

you have to update the fetch link to the deployed link you will get after deploying the application, that is how i got my application running

MAhmedSid · 2023-11-09T06:25:12Z

Now It is officially documented in a Next Js docs that it is better to fetch data from direct source instead of using local api route in Server components. Because at build time Server components will not able tofind those routes which are not still built yet. And you can refer the examples there.

It works in dev env because dev server don't create pre rendered static pages.

could you share the link that point to the docs?

Sure, https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating

aswnss-m · 2023-12-29T21:04:11Z

I encountered a similar problem , mine arise when the .env varibales was not recognized or unset. The problem got resolved when .env was fixed

huozhi · 2024-01-09T22:36:50Z

We got a PR up here to fix this 🙏

### What Show the original fetch error trace in the dev error overlay, which can show which line of the fetch call is failing. #### After ![image](https://github.com/vercel/next.js/assets/4800338/cebc8d03-58a7-4574-a1bb-896c7f396674) #### Before ![image](https://github.com/vercel/next.js/assets/4800338/5cc71ad9-c71e-44d0-aef2-5b0d5a00da36) ### Why This helps a lot for unclear fetch failures that you only see an error on your screen and you don't have idea where it's coming from ### How Fixed the async task error that swallowed by tracer, it should always throw in tracing after the metrics are traced. Closes NEXT-1362 Fixes #59153 Fixes #49896

github-actions · 2024-01-24T00:04:13Z

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

tomsseisums added the bug Issue was opened via the bug report template. label May 17, 2023

github-actions bot added the area: app label May 17, 2023

tomsseisums mentioned this issue May 17, 2023

[NEXT-1190] TypeError: fetch failed in server componant since next 13.0.6 #44062

Closed

1 task

mtlehtin mentioned this issue Aug 10, 2023

3x more network requests and latency issue on the same project after version upgrade #51653

Closed

1 task

This comment has been minimized.

Sign in to view

vajdagabor mentioned this issue Aug 28, 2023

Log ingestion FetchError axiomhq/next-axiom#128

Open

karlhorky mentioned this issue Sep 11, 2023

next js 13 server error " TypeError: fetch failed " #54961

Closed

1 task

karlhorky mentioned this issue Sep 20, 2023

[NEXT-1186] revalidatePath not working for dynamic routes while res.revalidate works fine #49387

Closed

1 task

luistak mentioned this issue Sep 29, 2023

TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed #55608

Closed

1 task

maxgfr mentioned this issue Oct 13, 2023

fix(auth): correction du bug qui fait que le contenu du json qui ne s'affiche pas + authentification à chaque refresh SocialGouv/cdtn-admin#1065

Merged

oeyoews mentioned this issue Nov 7, 2023

client server 问题 oeyoews/oeyoews.me#6

Closed

huozhi mentioned this issue Jan 9, 2024

Display original failed fetch trace #60274

Merged

huozhi closed this as completed in #60274 Jan 9, 2024

github-actions bot added the locked label Jan 24, 2024

github-actions bot locked as resolved and limited conversation to collaborators Jan 24, 2024

"TypeError: fetch failed" is an incomplete error: fetch in Server Component, if throws and isn't caught, loses info #49896

"TypeError: fetch failed" is an incomplete error: fetch in Server Component, if throws and isn't caught, loses info #49896

Comments

tomsseisums commented May 17, 2023 • edited Loading

Verify canary release

Provide environment information

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

Link to the code that reproduces this issue

To Reproduce

Describe the Bug

Expected Behavior

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

tomsseisums commented May 17, 2023 • edited Loading

tomsseisums commented May 17, 2023 • edited Loading

Athrun-Judah commented May 18, 2023

kaloyanBozhkov commented May 24, 2023

maciejadamski89 commented May 24, 2023

MoncefDeveloper commented May 25, 2023

gempi commented May 25, 2023

MoncefDeveloper commented May 25, 2023

Gr33nLight commented Jun 8, 2023

myzsqn commented Jun 12, 2023

hrdwdmrbl commented Jul 10, 2023

Sumitmaithani commented Jul 23, 2023 • edited Loading

anthonytison commented Jul 23, 2023

em1l1000 commented Aug 9, 2023

Sumitmaithani commented Aug 9, 2023

DevEmmy commented Aug 23, 2023

This comment has been minimized.

andy-leezard commented Aug 31, 2023 • edited Loading

Elvincth commented Sep 8, 2023

TheKenoCode commented Sep 11, 2023

adanperez commented Sep 11, 2023

karlhorky commented Sep 11, 2023

karlhorky commented Sep 11, 2023

LiorDueto commented Sep 11, 2023

parthy007 commented Sep 13, 2023

Zakisb commented Sep 17, 2023

guanyu-y commented Sep 19, 2023 • edited Loading

karlhorky commented Sep 19, 2023 • edited Loading

timomedia commented Sep 22, 2023

MAhmedSid commented Oct 8, 2023

AatifxShaikh commented Oct 15, 2023 • edited Loading

Rivalakmalll commented Oct 26, 2023

TypeError: fetch failed

eademir commented Oct 27, 2023

MAhmedSid commented Oct 27, 2023 • edited Loading

eademir commented Nov 4, 2023 • edited Loading

MAhmedSid commented Nov 4, 2023 • edited Loading

ddikodroid commented Nov 9, 2023

AatifxShaikh commented Nov 9, 2023

TypeError: fetch failed

MAhmedSid commented Nov 9, 2023

aswnss-m commented Dec 29, 2023

huozhi commented Jan 9, 2024 • edited Loading

github-actions bot commented Jan 24, 2024

"TypeError: fetch failed" is an incomplete error: `fetch` in Server Component, if throws and isn't caught, loses info #49896

"TypeError: fetch failed" is an incomplete error: `fetch` in Server Component, if throws and isn't caught, loses info #49896

tomsseisums commented May 17, 2023 •

edited

Loading

tomsseisums commented May 17, 2023 •

edited

Loading

tomsseisums commented May 17, 2023 •

edited

Loading

Sumitmaithani commented Jul 23, 2023 •

edited

Loading

andy-leezard commented Aug 31, 2023 •

edited

Loading

guanyu-y commented Sep 19, 2023 •

edited

Loading

karlhorky commented Sep 19, 2023 •

edited

Loading

AatifxShaikh commented Oct 15, 2023 •

edited

Loading

MAhmedSid commented Oct 27, 2023 •

edited

Loading

eademir commented Nov 4, 2023 •

edited

Loading

MAhmedSid commented Nov 4, 2023 •

edited

Loading

huozhi commented Jan 9, 2024 •

edited

Loading