search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.91k stars 26.97k forks source link

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

Closed tomsseisums closed 10 months ago

tomsseisums commented 1 year ago

Verify 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: https://github.com/vercel/next.js/issues/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
  }
}
  1. I would expect this to be shown by default in terminal logs. Without me having to try/catch + console.error to see the details.
  2. 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.
  3. 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

tomsseisums commented 1 year ago

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 commented 1 year ago

I think that might be this PR: https://github.com/vercel/next.js/pull/45472 cc: @hanneslund

Athrun-Judah commented 1 year ago

I had the same problem in the server component.

kaloyanBozhkov commented 1 year ago

I've documented this as well https://github.com/vercel/next.js/issues/48744

maciejadamski89 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@MoncefDeveloper have you tried to update to v13.4.4-canary.9 according to https://github.com/vercel/next.js/issues/50298#issuecomment-1562037690?

MoncefDeveloper commented 1 year ago

@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 commented 1 year ago

I tried almost every solution :')

Heyyyyyyy did you manage to find a solution to this?

myzsqn commented 1 year ago

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

https://github.com/nodejs/undici/issues/2046#issuecomment-1497533376

Hope it helps

hrdwdmrbl commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

em1l1000 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

renanrodrigueszup commented 1 year ago

same here

andy-leezard commented 1 year ago

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.

image

(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.

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

image

Elvincth commented 1 year ago

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

image
TheKenoCode commented 1 year ago

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

same here >:( 2023-09-10 19_38_30-

adanperez commented 1 year ago

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 commented 1 year ago

Seems similar to what's happening over here:

karlhorky commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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)

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

Zakisb commented 1 year ago

Having the same issue too !

guanyu-y commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

AatifxShaikh commented 1 year ago 
    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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Screenshot_20231109-112434.jpg

aswnss-m commented 10 months ago

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 commented 10 months ago

We got a PR up here to fix this 🙏

github-actions[bot] commented 9 months ago

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.