Error: Unexpected type of undefined

In my nextjs app, I'm using preloadQuery to load and render a query inside a Server Component:

  ... 
  // this is a server component
  const localesQuery = preloadQuery(api.locales.get.default, {
    locale: "en",
  });

  return <RenderLocales query={localesQuery} />

  ... 
  // this is a server component
  const localesQuery = preloadQuery(api.locales.get.default, {
    locale: "en",
  });

  return <RenderLocales query={localesQuery} />

Then in my client component, I past the result into a usePreloadedQuery.

"use client";
...

export const RenderLocales = ({ query }) => {
  const locales = usePreloadedQuery(query); // <-- if I remove this line, component renders fine
  return <div>...</div>
}

"use client";
...

export const RenderLocales = ({ query }) => {
  const locales = usePreloadedQuery(query); // <-- if I remove this line, component renders fine
  return <div>...</div>
}

I'm observing that every time the hook is called, an error is thrown on the next line. If I remove the hook then the app runs fine. Below is a screenshot of the error reported at the very next line where the rendering starts. Is this perhaps a well-known bug?

"convex": "^1.13.2",
"next": "^14.2.5",
"react": "18.2.0",
"react-dom": "18.2.0",

"convex": "^1.13.2",
"next": "^14.2.5",
"react": "18.2.0",
"react-dom": "18.2.0",

4 Replies

ballingt•5mo ago

preloadQuery on the server should be awaited

ballingt•5mo ago

https://docs.convex.dev/client/react/nextjs/server-rendering#preloading-data-for-client-components

Next.js Server Rendering | Convex Developer Hub

Next.js automatically renders both Client and Server Components on the server

noob saibotOP•5mo ago

😁 this is embarrassing...(spent half a day on this...) Thanks for the help

Michal Srb•5mo ago

I think Next is missing the "promises should be awaited" ESLint rule in its default config 😦

Error: Unexpected type of undefined

Did you find this page helpful?