[Solved!] TypeError: React.createContext is not a function (not using server components)

[vast otter]

Solution found!
https://github.com/TanStack/query/issues/3595

Hello! Need some help debugging an error that appears to be originating from react-query.

Error:

TypeError: React.createContext is not a function
  at file:///home/node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:5:32
  at ModuleJob.run
  at async Promise.all (index 0)
  at async importModuleDynamicallyWrapper

Context:
Tried and experience this issue with nextjs 12.3.4 and 13.5.6 (Not using experimental server components)
Nodejs: 18.18.1
@tanstack/react-query: 5.0.0
@tanstack/react-query-devtools: 5.0.1
React and React DOM: 18.2.0

I experience no issues in local dev mode, everything works flawlessly.
After deployment I see the above error.

_app.tsx

import { QueryClientProvider } from '@/providers'

function App() {
  return (
    <QueryClientProvider>
      <OurApp />
    </QueryClientProvider>
  )
}

QueryClientProvider.tsx

import { QueryClientProvider as Provider, QueryClient } from '@tanstack/react-query'
import { ReactQueryDevTools } from '@tanstack/react-query-devtools'

export function QueryClientProvider({ children }: { children: React.ReactNode }) {
 const [queryClient] = useState(() => new QueryClient())
  return (
    <Provider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </Provider>
  )
}

[sharp hill]

Another issue: your query client is not stable

https://tanstack.com/query/latest/docs/react/eslint/stable-query-client

[wraith swan]

Are you deploying to the edge? Next is known to have a different runtime there

[vast otter]

@wraith swan I updated the usage to stable. Are you referring to the edge runtime? I’m fairly new to Next so I’m not entirely sure about all the terminology yet. We aren’t using the edge runtime specifically

[vast otter]

Follow up: I’ve tried every combination under the sun of NextJS 12/13 and react-query 4 and 5. As soon as I removed react-query I stopped experiencing the error. I would really like to get to the bottom of this because I LOVE react-query and don’t want to move away from it 😭

[wraith swan]

please try to reproduce it in codesandbox

[vast otter]

I cannot reproduce it in codesandbox, I have the tried the same approach and it works.
I'm not even sure how I can debug this further. Any advice at all would be tremendously helpful

The same way I cannot reproduce it when I run my nextjs server in dev/local mode

https://codesandbox.io/p/sandbox/mystifying-rgb-w2fm7q

Similar issue:

https://github.com/vercel/next.js/issues/41936

However “use client” is not relevant to me because I am not using the new app router

[vast otter]

Upon further reading, since I am quite a bit new to Next.js, this could entirely be related to an assumption I'm making.
The QueryClientProvider wrapper is in _app.tsx and this provides the global layout that will be consumed by my other pages, isn't that file rendered in a server-side environment? Looking at the code in QueryClientProvider it contains client-side code, including that React.createContext line.

Looking at this example: https://tanstack.com/query/latest/docs/react/examples/react/nextjs

I see there's an additional inclusion of HydrationBoundary - is that the missing piece that would be required? Do I need to switch my strategy to prefetch?

-- More context:
Just wrapping my <Component {...pageProps} /> in <QueryClientProvider queryClient={queryClient}> and not doing ANYTHING else causes my server to crash with TypeError: React.createContext is not a function

[vast otter]

@wraith swan UPDATE: I have found the solution to the problem!!
It was this: https://github.com/TanStack/query/issues/3595

[vast otter]

[Solved!] TypeError: React.createContext is not a function (not using server components)

[quasi sundial]

Sorry to bump such an old thread, but do you recall which fix mentioned resolved this issue, we aren't using a monorepo and hitting same error, only on AWS Amplify not on Vercel with the exact same code base, so must be something in how they are run?