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.
- Find the fetch call with a path starting with / in server code.
- If it calls your own route handler, move the logic into a shared function and call it directly from the Server Component.
- For external or cross-service calls, use an absolute URL from config (process.env.API_URL).
- Keep relative URLs only in Client Components, where the browser resolves them.
// 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.
Related errors
- TypeError: fetch failed
- Dynamic server usage: Route /x couldn't be rendered statically because it used `headers`.
- An error occurred in the Server Components render. The specific message is omitted in...
References: Next.js docs: fetching data in Server Components, MDN: URL() constructor