random 500 Internal Server Error - TypeError: fetch failed - in development mode #55033

MarkLyck · 2023-09-06T01:53:08Z

MarkLyck
Sep 6, 2023

Summary

I've been building an application in Nextjs 13 with app router.

However every ~5-20 minutes or so when working on it in development mode, I'll refresh the page to see some updated content and I'll get a "500
Internal Server Error."

In the terminal it's printing this error when it happens:

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async invokeRequest (/Users/marklyck/web/maker-pilot/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
    at async invokeRender (/Users/marklyck/web/maker-pilot/node_modules/next/dist/server/lib/router-server.js:254:29)
    at async handleRequest (/Users/marklyck/web/maker-pilot/node_modules/next/dist/server/lib/router-server.js:447:24)
    at async requestHandler (/Users/marklyck/web/maker-pilot/node_modules/next/dist/server/lib/router-server.js:464:13)
    at async Server.<anonymous> (/Users/marklyck/web/maker-pilot/node_modules/next/dist/server/lib/start-server.js:117:13) {
  cause: Error: connect ECONNREFUSED ::1:49488
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1592:16) {
    errno: -61,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 49488
  }
}

When it gets in this state, I have to exit the current dev-mode and restart nextjs. It's incredibly frustrating doing this every 5-20 minutes.

It always happens after I refresh the browser (but most of the time when I refresh work fine without issues). It's seemingly random when it happens? Although I usually refresh the browser after I make a change in the code.

My current best guess is that that there's a small time-frame where if you make a code-change and nextjs is doing a hot-reload while you refresh the browser, nextJS gets into a bad state that it doesn't recover from? But I feel like I would be able to find other examples of this issue if that was the case?

This is what the network requests look like when it's happening:

It fails to fetch any resources from the nextjs server, going to another route doesn't fix it either.

Given the severe lack of information in this error, I don't even know where to start debugging this.

Additional information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 20.4.0
      npm: 9.7.2
      Yarn: 1.22.17
      pnpm: 8.7.0
    Relevant Packages:
      next: 13.4.19
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A


Here's my next.js config:



/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
await import('./env.mjs')

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: false,
  experimental: {
    serverActions: true,
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'uploadthing.com',
        port: '',
      },
      {
        protocol: 'https',
        hostname: 'img.clerk.com',
        port: '',
      },
    ],
  },
}

export default config



### Example

_No response_

Sakkhor909 · 2023-09-07T13:58:18Z

Sakkhor909
Sep 7, 2023

I am facing the same problem. But in my case even if I am not refreshing.

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)   
    at async invokeRequest (D:\Personal\Work\Web Marketizer\Website\web-marketizer\node_modules\next\dist\server\lib\server-ipc\invoke-request.js:17:12)
    at async invokeRender (D:\Personal\Work\Web Marketizer\Website\web-marketizer\node_modules\next\dist\server\lib\router-server.js:254:29)
    at async handleRequest (D:\Personal\Work\Web Marketizer\Website\web-marketizer\node_modules\next\dist\server\lib\router-server.js:447:24)
    at async requestHandler (D:\Personal\Work\Web Marketizer\Website\web-marketizer\node_modules\next\dist\server\lib\router-server.js:464:13)
    at async Server.<anonymous> (D:\Personal\Work\Web Marketizer\Website\web-marketizer\node_modules\next\dist\server\lib\start-server.js:117:13) {
  cause: Error: connect ECONNREFUSED ::1:55698
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 55698
  }
}

1 reply

MarkLyck Sep 8, 2023
Author

Please let me know if you solve it 🙏 been happening for weeks for me.

This guy also reported the same issue it looks like: #54598

Another one with the same issue: #55012

@leerob any idea what this is?

Sakkhor909 · 2023-09-08T04:18:51Z

Sakkhor909
Sep 8, 2023

I am using React Icon. Maybe it causing the error. I don't know for sure. But I modularizeImports reac icon.
Read details here #54359

After that I didn't face any problem. Also I install next@canary. Now everything is going smoothly.

3 replies

Stevemoretz Sep 18, 2023

Did you mean react-icons/react-icons#786 (comment) ?

Sakkhor909 Sep 18, 2023

Yes

MarkLyck Sep 19, 2023
Author

I'm not using react-icons, but it could be caused by multiple packages 🤷‍♂️

Stevemoretz · 2023-09-18T12:08:41Z

Stevemoretz
Sep 18, 2023

Thanks for that advice, I'm using the latest versions at the moment. I just started using them and so far no issue, maybe they have fixed it in 13.4.20 ``` ***@***.***/all-files": "https://github.com/react-icons/react-icons/releases/download/v4.11.0/react-icons-all-files-4.11.0.tgz", "next": "^13.4.20-canary.35", ```

…

On Mon, Sep 18, 2023 at 2:58 PM MD. Minhajur Rahman < ***@***.***> wrote: Yes — Reply to this email directly, view it on GitHub <#55033 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGTF3DVLQSO4BOYXYZNAM6LX3AV7DANCNFSM6AAAAAA4MS4WIM> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

0 replies

ShahriarKh · 2023-09-23T13:54:21Z

ShahriarKh
Sep 23, 2023

I'm facing this issue in prod! and really have no idea what causes this

0 replies

rcssdy · 2023-10-01T19:59:08Z

rcssdy
Oct 1, 2023

I'm getting this issue locally. Have been searching for hours on how to fix it, no luck.

0 replies

thisisandreww · 2023-10-04T14:13:40Z

thisisandreww
Oct 4, 2023

Facing this issue in production intermittently, using og-image-generation.

0 replies

Mario-Beck · 2023-10-24T10:58:18Z

Mario-Beck
Oct 24, 2023

Where does the port number in this error message come from?

0 replies

vladyslavKucheruk · 2024-01-05T20:01:03Z

vladyslavKucheruk
Jan 5, 2024

I'm facing the same error in the production environment. But when I refresh the page everything works as expected.
Is there a way to handle this "500 Internal Server Error." screen?

0 replies

Shapati · 2024-01-25T10:46:58Z

Shapati
Jan 25, 2024

Summary

I've been building an application in Nextjs 13 with app router.

However every ~5-20 minutes or so when working on it in development mode, I'll refresh the page to see some updated content and I'll get a "500 Internal Server Error."

In the terminal it's printing this error when it happens:
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async invokeRequest (/Users/marklyck/web/maker-pilot/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
    at async invokeRender (/Users/marklyck/web/maker-pilot/node_modules/next/dist/server/lib/router-server.js:254:29)
    at async handleRequest (/Users/marklyck/web/maker-pilot/node_modules/next/dist/server/lib/router-server.js:447:24)
    at async requestHandler (/Users/marklyck/web/maker-pilot/node_modules/next/dist/server/lib/router-server.js:464:13)
    at async Server.<anonymous> (/Users/marklyck/web/maker-pilot/node_modules/next/dist/server/lib/start-server.js:117:13) {
  cause: Error: connect ECONNREFUSED ::1:49488
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1592:16) {
    errno: -61,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 49488
  }
}
When it gets in this state, I have to exit the current dev-mode and restart nextjs. It's incredibly frustrating doing this every 5-20 minutes.

It always happens after I refresh the browser (but most of the time when I refresh work fine without issues). It's seemingly random when it happens? Although I usually refresh the browser after I make a change in the code.

My current best guess is that that there's a small time-frame where if you make a code-change and nextjs is doing a hot-reload while you refresh the browser, nextJS gets into a bad state that it doesn't recover from? But I feel like I would be able to find other examples of this issue if that was the case?

This is what the network requests look like when it's happening:

It fails to fetch any resources from the nextjs server, going to another route doesn't fix it either.

Given the severe lack of information in this error, I don't even know where to start debugging this.

Additional information
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 20.4.0
      npm: 9.7.2
      Yarn: 1.22.17
      pnpm: 8.7.0
    Relevant Packages:
      next: 13.4.19
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A


Here's my next.js config:



/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
await import('./env.mjs')

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: false,
  experimental: {
    serverActions: true,
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'uploadthing.com',
        port: '',
      },
      {
        protocol: 'https',
        hostname: 'img.clerk.com',
        port: '',
      },
    ],
  },
}

export default config
### Example

_No response_

any fix to this yet ?

0 replies

rodrigosebastiao · 2024-04-23T02:13:02Z

rodrigosebastiao
Apr 23, 2024

I have 3 front+backs in production, it happens randomly, right now it killed one of my application, 3 days already.
Seems very specific between nextjs and strapi + hostinger, can't request to production API, fails in localhost and in vercel production.
But the APIs works fine everywhere else, insomnia/postman, direct browser by address or dev console.
https + SSH seems properly configured.

0 replies

giannif · 2024-05-16T15:52:44Z

giannif
May 16, 2024

I'm seeing this in production. It was happening in about 1 - 20 refreshes, but then I upgraded to a canary (v14.3.0-canary.63) and the issue seemed to have gone away. Unfortunately 2 days later it showed up again.

v14.3.0 does have some work done around externalizing undici, so hoping that fixes it. Here is a blog post that shares my frustrations, I have not tried their solution: https://medium.com/@kaloyan_17221/fix-vercel-next-js-fetch-failed-from-undici-polyfill-8c66346c9c2f

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

random 500 Internal Server Error - TypeError: fetch failed - in development mode #55033

{{title}}

Replies: 11 comments 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Summary

Additional information

{{title}}

{{title}}

Select a reply

random 500 Internal Server Error - TypeError: fetch failed - in development mode #55033

Summary

Additional information

Replies: 11 comments · 4 replies

MarkLyck Sep 8, 2023 Author

MarkLyck Sep 19, 2023 Author

Summary

Additional information

Replies: 11 comments 4 replies

MarkLyck Sep 8, 2023
Author

MarkLyck Sep 19, 2023
Author