TypeError: Failed to parse URL from /api/orders

Next.js · updated 2026-11-03

Thrown by fetch() in Node.js (Server Components, route handlers, getServerSideProps, server actions) when the URL has no scheme and host. In the browser, relative URLs resolve against the page; on the server they cannot.

 ⨯ TypeError: Failed to parse URL from /api/orders
    at node:internal/deps/undici/undici:13502:13
    at async OrdersPage (./src/app/orders/page.tsx:6:15) {
  [cause]: TypeError: Invalid URL
      at new URL (node:internal/url:816:29) {
    code: 'ERR_INVALID_URL',
    input: '/api/orders'
  }
}

Quick fix

In a Server Component, don't fetch your own API route: import and call the function the route uses (getOrders()) directly. If you must fetch a URL, build an absolute one from an environment variable such as NEXT_PUBLIC_BASE_URL.

  1. Find the fetch call with a path starting with / in server code.
  2. If it calls your own route handler, move the logic into a shared function and call it directly from the Server Component.
  3. For external or cross-service calls, use an absolute URL from config (process.env.API_URL).
  4. Keep relative URLs only in Client Components, where the browser resolves them.
typescript
// lib/orders.ts: shared by the route handler and the page
export async function getOrders(userId: string) {
  return db.order.findMany({ where: { userId } });
}

// app/orders/page.tsx (Server Component): no HTTP round trip to yourself
import { getOrders } from '@/lib/orders';
export default async function OrdersPage() {
  const orders = await getOrders(await currentUserId());
  return <OrderTable orders={orders} />;
}

// If you really need HTTP from the server: an absolute URL
// await fetch(new URL('/api/orders', process.env.NEXT_PUBLIC_BASE_URL));

Why it happens

Fetching your own API route from a Server Component

Code moved from a client component or from the pages router keeps fetch("/api/...") and now runs on the server, where there is no origin to resolve it against.

Shared helpers used on both sides

A helper that builds relative URLs works when called from the browser and fails when a server action or route handler calls it.

A missing base URL variable

Code that builds `${process.env.API_URL}/orders` produces "undefined/orders" or "/orders" when the variable is not set in that environment.

Other fixes

  • Calling your own API over HTTP from the server also costs an extra request and loses the user's cookies unless you forward them.
  • In route handlers you can build an absolute URL from the incoming request: new URL('/api/x', request.url).

Same error, other wording

  • TypeError: Failed to parse URL from undefined/api/orders
  • TypeError: Invalid URL
  • TypeError [ERR_INVALID_URL]: Invalid URL

Let your coding agent catch the next one

Runheed records this error in production with the stack trace, the breadcrumbs before it and the agent session that shipped the code, and serves it to Claude Code, Cursor or any MCP client. With it connected, you can ask:

> Find the 'Failed to parse URL' errors in production, show me each server-side fetch with a relative URL, and replace calls to our own API routes with direct function calls.

Plans from $29/moSee what your agent readsSee the setupCancel any time from the billing portal

Related errors

References: Next.js docs: fetching data in Server Components, MDN: URL() constructor