Building production when using localhost:3000 in a fetch gives ECONNREFUSED

[douwepausma]

Link to the code that reproduces this issue

https://github.com/douwepausma/build-with-routehandlers-reproduction

To Reproduce

1. Create new next-app npx create-next-app@latest
2. Create a simple route.

// /app/api/model/route.js
export async function GET() {
    return Response.json({ data: {message: 'Hello World!'} })
}

3. Fetch route from page.

// /app/page.js
export default async function Home() {
  try {
    const res = await fetch('http://localhost:3000/api/model');
  } catch (error) {
    console.log(error);
  }
  
  return null;
}

4. npm run build

Current vs. Expected behavior

Current behavior

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

Expected behavior
Successful build

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:43:05 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6020
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.11.0
Relevant Packages:
  next: 14.0.4-canary.32
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Data fetching (gS(S)P, getInitialProps), Middleware / Edge (API routes, runtime)

Additional context

What I've tried

1. Use 127.0.0.1 instead of localhost
2. Adding export const runtime = 'edge' to page fixed build issue, but breaks app later on (when deploying on vercel).*
3. Adding const dynamic = 'force-dynamic' to page fixed build issue, but breaks app later on (when deploying on vercel).*

*These fixes shouldn't be necessary as I've successfully used route handlers in the past without it.

[SpinBoxx]

Hello, in your issue, you fetch this : http://localhost:3000/api/model BUT in your api folder your route is /app/api/model-name/route.js. So normally your fetch is like this : http://localhost:3000/api/model-name with GET method.

[douwepausma]

Hello, in your issue, you fetch this : http://localhost:3000/api/model BUT in your api folder your route is /app/api/model-name/route.js. So normally your fetch is like this : http://localhost:3000/api/model-name with GET method.

You're right, the comment has te wrong notation. I edited it. This is sadly not the solution for the fix as this is an error only present in the issue documentation and not the actual code.

[Bahlaouane-Hamza]

Why not import the route in page and directly use the GET method ? No extra round trip. Did this work before ? Does this fail when doing the same fetch at the middleware instead of page ?

[douwepausma]

Why not import the route in page and directly use the GET method ? No extra round trip. Did this work before ? Does this fail when doing the same fetch at the middleware instead of page ?

The code in the example is a simplified scenario from the reproduction repository. The page.js is not the only location I am using this fetch (also client-side components). The reason the I am using a route handler is because I want to access API keys from my .env that I don't want to be accessible from the client-side. I've successfully done fetches to localhost:3000 in early versions of v13.

Seems like quite a common scenario to me. Either I am doing something wrong fundamentally, or there's a setting I am missing. Everythings works fine when I run npm run dev.

[SpinBoxx]

I tried on my project and i writed

`export default async function Home() {
  const res = await fetch("http://localhost:3000/api/test");
  console.log(res.ok);

  // const params = useParams();
  return (
    <div className="m-auto flex  flex-col items-start justify-start gap-y-16 pb-10 xl:mt-16">
    </div>
  );
}`

and i defined

// /app/api/test/route.ts

export async function GET() {
 return Response.json({ data: { message: "Hello World!" } });
}

And i execute npm run build, i have no error. The only way where u can have an error "ECONNREFUSED" is that you fetch a undefined route

[douwepausma]

@SpinBoxx Interesting, what node version are you using? I am using node 18.18.2

[SpinBoxx]

Im using node v20.8.0

[devajakamerus]

Node has had issues with resolving IPv6 vs v4, maybe related? Have you tried on another OS?

[douwepausma]

I just tested the reproduction environment with node v16, v18, v20 and still getting errors. Reading the documentation I assumed route handlers would work on server components, I guess they are meant for client components and actually don't work on server components at all. Kind of annoying as I have to create two function doing to same thing for both client and server.

[douwepausma]

Node has had issues with resolving IPv6 vs v4, maybe related? Have you tried on another OS?

I've read something about that as well. I tried locally on mac, but Vercel is giving issues as well.

[devajakamerus]

Have you tried editing package.json script to

"dev": "NODE_OPTIONS='--dns-result-order=ipv4first' next dev",

Or using dns.lookup or something like that before fetching to actually see what it resolves to?

[Bahlaouane-Hamza]

@devajakamerus

I can't reproduce this. both IPV4 and IPV6 builds successfully.

$ node
Welcome to Node.js v18.18.2.
Type ".help" for more information.
> require('dns').lookup('localhost', null, (e,a,f) => console.log(e,a,f))
GetAddrInfoReqWrap {
  callback: [Function (anonymous)],
  family: 0,
  hostname: 'localhost',
  oncomplete: [Function: onlookup]
}
> null ::1 6

$ NODE_OPTIONS='--dns-result-order=ipv4first' node
Welcome to Node.js v18.18.2.
Type ".help" for more information.
> require('dns').lookup('localhost', null, (e,a,f) => console.log(e,a,f))
GetAddrInfoReqWrap {
  callback: [Function (anonymous)],
  family: 0,
  hostname: 'localhost',
  oncomplete: [Function: onlookup]
}
> null 127.0.0.1 4

@douwepausma what's the output of dns.getServers() ? Firewall enabled ? and

$ node
require('dns').lookupService('::1', 3000, (err, hostname, service) => {
  console.log(hostname, service);
})