`react-query` hydration in /app/page.tsx thrown error: React.createContext is not a function

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 21.1.0: Wed Oct 13 17:33:24 PDT 2021; root:xnu-8019.41.5~1/RELEASE_ARM64_T8101 Binaries: Node: 18.12.0 npm: 8.19.2 Yarn: 1.22.11 pnpm: 7.13.6 Relevant packages: next: 12.3.2-canary.43 eslint-config-next: N/A react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

chrome 106.0.5249.119

How are you deploying your application? (if relevant)

No response

Describe the Bug

in /app/page.tsx

import { QueryClient } from "@tanstack/react-query";
...
// throw error
const queryClient = new QueryClient();

thrown error: React.createContext is not a function

Expected Behavior

I want to prefetch data in server component, and then dehydrate it to transfer to client component. like this: https://tanstack.com/query/v4/docs/guides/ssr

Link to reproduction

https://codesandbox.io/p/github/wh5938316/next13-react-query/main?file=%2Fapp%2Fpage.tsx

To Reproduce

const queryClient = new QueryClient();

in /app/page.tsx

[lukemorales]

new QueryClient is theoretically irrelevant to react.

Incorrect, React Query’s QueryClient uses React Context, so if you try to create a new instance on the server, it will throw because React Context does not exist on the server

[efilion]

https://codesandbox.io/p/github/efilion/next13-react-query/main?file=%2Fapp%2FProvider.tsx

Above is a working solution for using react-query with NextJS 13’s app directory. TanStack’s documentation informed the implementation: https://tanstack.com/query/v4/docs/guides/ssr#using-other-frameworks-or-custom-ssr-frameworks.

This could be a good addition to TanStack’s documentation. I can open a new issue with them and see if they’re willing to add it even though appDir is still experimental and the above solution could break in the future.

Any feedback from Vercel and other NextJS experts on the above solution?