fetchQuery: TypeError: fetch failed For a fresh Next.js X Convex Project

Hello I am getting this error when I am trying to run a fetchQuery on a next.js server component

typescript 
//page.tsx
import { api } from "@/convex/_generated/api";
import { fetchQuery } from "convex/nextjs";

export default async function Home() {
  const numbers = await fetchQuery(api.myFunctions.listNumbers, {
    count: 3,
  });
  console.log("Numbers from server:", numbers);
  return (
    <>
      <header className="sticky top-0 z-10 bg-background p-4 border-b-2 border-slate-200 dark:border-slate-800 flex flex-row justify-between items-center">
        Convex + Next.js
      </header>
      <main className="p-8 flex flex-col gap-16">
        <h1 className="text-4xl font-bold text-center">Convex + Next.js</h1>
      </main>
    </>
  );
}

typescript 
//page.tsx
import { api } from "@/convex/_generated/api";
import { fetchQuery } from "convex/nextjs";

export default async function Home() {
  const numbers = await fetchQuery(api.myFunctions.listNumbers, {
    count: 3,
  });
  console.log("Numbers from server:", numbers);
  return (
    <>
      <header className="sticky top-0 z-10 bg-background p-4 border-b-2 border-slate-200 dark:border-slate-800 flex flex-row justify-between items-center">
        Convex + Next.js
      </header>
      <main className="p-8 flex flex-col gap-16">
        <h1 className="text-4xl font-bold text-center">Convex + Next.js</h1>
      </main>
    </>
  );
}

And on the convex side the default list function and I am getting this on the console

 GET /.well-known/appspecific/com.chrome.devtools.json 404 in 23ms
 ⨯ TypeError: fetch failed
    at async Home (app/page.tsx:5:18)
  3 |
  4 | export default async function Home() {
> 5 |   const numbers = await fetchQuery(api.myFunctions.listNumbers, {
    |                  ^
  6 |     count: 3,
  7 |   });
  8 |   console.log("Numbers from server:", numbers); {
  digest: '3204391019',
  [cause]: [AggregateError: ] { code: 'ETIMEDOUT' }
}
 GET / 500 in 874ms

 GET /.well-known/appspecific/com.chrome.devtools.json 404 in 23ms
 ⨯ TypeError: fetch failed
    at async Home (app/page.tsx:5:18)
  3 |
  4 | export default async function Home() {
> 5 |   const numbers = await fetchQuery(api.myFunctions.listNumbers, {
    |                  ^
  6 |     count: 3,
  7 |   });
  8 |   console.log("Numbers from server:", numbers); {
  digest: '3204391019',
  [cause]: [AggregateError: ] { code: 'ETIMEDOUT' }
}
 GET / 500 in 874ms

Any idea what might be a reason? Any suggestions are welcome 🙏 🥲

4 Replies

Convex Bot•8h ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

erquhart•6h ago

Can you share the listNumbers function definition

fuadnafiz98OP•6h ago

Hi, I found the issue https://github.com/vercel/next.js/discussions/70423 also I had to update my nodejs version 20 -> 24

erquhart•6h ago

Thanks for sharing!

fetchQuery: TypeError: fetch failed For a fresh *Next.js* X *Convex* Project

Did you find this page helpful?

fetchQuery: TypeError: fetch failed For a fresh Next.js X Convex Project