bug: tRPC in appDir "TypeError: useContext() is null" even with "use client"

jontmy commented 1 year ago

Provide environment information

System:
  OS: Windows 10 10.0.22621
  CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700K
  Memory: 11.78 GB / 31.70 GB
Binaries:
  Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
  npm: 9.4.0 - C:\Program Files\nodejs\npm.CMD

"ct3aMetadata": {
  "initVersion": "7.7.0"
}

Describe the bug

I've been experimenting with using tRPC when incrementally adopting the /app directory.

Using the api variable from utils/api in any page in the app directory results in "TypeError: useContext() is null".

I'm particularly stumped because TypeScript does not emit any type errors in the IDE.

Is the use of tRPC in the app directory currently unsupported? Apologies if this is not the right use case, I've only been trying out the T3 stack recently.

Reproduction repo

https://github.com/jontmy/t3-err

To reproduce

from `create-t3-app`

Scaffold the T3 app using npx create-t3-app with TypeScript and all packages, and the default ~ alias.
In next.config.mjs, comment out the i18n lines and enable the appDir.
```
const config = {
// ...
experimental: {
    appDir: true
}
}
```
Create the file src/app/test/page.tsx and the directories along the path.
Copy the following contents into test/page.tsx. It's derived from the parts of pages/index.tsx that display "Hello from tRPC".
```
"use client"
```

import {api} from "~/utils/api";

const UserPage = () => { const hello = api.example.hello.useQuery({text: "from tRPC"});

return (
    <h1>{hello.data ? hello.data.greeting : "Loading tRPC query..."}</h1>
);

}; export default UserPage

5. Run `npm run dev` and go to [localhost:3000/test](http://localhost:3000/test).
6. You will see the following error and stack trace.

error - node_modules\@trpc\react-query\dist\createHooksInternal-416876ed.mjs (341:16) @ Object.useQuery$1 [as useQuery] error - TypeError: Cannot destructure property 'abortOnUnmount' of 'useContext(...)' as it is null. at UserPage (./src/app/test/page.tsx:11:77)


![image](https://user-images.githubusercontent.com/50949210/224480925-f9277dab-db48-440a-9511-a2433b76b388.png)

### Additional information

As an additional sanity check I recreated the page in the `pages` directory, and it successfully renders "Hello from tRPC".

c-ehrlich commented 1 year ago

We currently do not support the app dir.

My guess to why what you're doing isn't working: The tRPC client requires some providers to work. In Create T3 App we use the withTRPC higher order component that includes these providers. I doubt this would currently work in the app dir because you need to wrap the entire app and it's fundamentally different.

I think a "normal" React implication (see docs) might work in a client component. But I haven't tried it, so no promises.

Collins-Ruto commented 1 year ago

I have come across the same issue using appDir. The issue does not persist on production environment only in development in my case.

kadetXx commented 11 months ago

Just incase anyone else comes across this issue, here's a trpc setup that works with next13 - https://github.com/wpcodevo/nextjs13-trpc-setup

t3-oss / create-t3-app