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

Running: Node

21.6.2

21.6.2

, tRPC

11.0.0-rc.553

11.0.0-rc.553

(client, server, next, react-query), next

14.2.14

14.2.14

, and react-query

5.59.0

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

next dev --turbo

rather than

next dev

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?

Solution

ahh, finally found it. typo;

'use-client'

'use-client'

rather than

'use client'

'use client'

Jump to solution

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

Similar Threads