Angush Posts

Angush

•Created by Angush on 10/6/2024 in #❓-help

Following documentation gives error: "You cannot dot into a client module from a server component."

Running: Node 21.6.2, tRPC 11.0.0-rc.553 (client, server, next, react-query), next 14.2.14, and react-query 5.59.0 So, I'm trying to follow the React-Query Server Components setup guide in the tRPC docs, and I've mostly just copy pasted the code out, yet my client component isn't working. This works:

import { trpcServer } from '@/trpc/server'
export const TestGreeting = async () => {
  const message = await trpcServer.test()
  if (!message) return <div>Loading...</div>
  return <div>{message}</div>
}

import { trpcServer } from '@/trpc/server'
export const TestGreeting = async () => {
  const message = await trpcServer.test()
  if (!message) return <div>Loading...</div>
  return <div>{message}</div>
}

But when I change it to a client component, like the code in the documentation on tRPC's website:

'use-client'

import { trpcClient } from '@/trpc/client'
export const TestGreeting = async () => {
  const message = trpcClient.test.useQuery()
  if (!message.data) return <div>Loading...</div>
  return <div>{message.data}</div>
}

'use-client'

import { trpcClient } from '@/trpc/client'
export const TestGreeting = async () => {
  const message = trpcClient.test.useQuery()
  if (!message.data) return <div>Loading...</div>
  return <div>{message.data}</div>
}

It spits out this error:

Unhandled Runtime Error
Error: Cannot access test.useQuery on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

Source
src/app/home/TestGreeting.tsx (7:35) @ useQuery
   5 |
   6 | export const TestGreeting = async () => {
>  7 |   const message = trpcClient.test.useQuery()
     |                                   ^

Unhandled Runtime Error
Error: Cannot access test.useQuery on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

Source
src/app/home/TestGreeting.tsx (7:35) @ useQuery
   5 |
   6 | export const TestGreeting = async () => {
>  7 |   const message = trpcClient.test.useQuery()
     |                                   ^

When using next dev --turbo rather than next dev, the error message is different, though pointing to the same line:

Error: Cannot read properties of undefined (reading 'useQuery')

Error: Cannot read properties of undefined (reading 'useQuery')

Correct me if I'm wrong, but... that's no longer a server component, right?

6 replies