sensitive-blue

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

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

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>
  )
}

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>
  )
}

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>
  )
}

GitHub

Unable to use react-query when hooks are created in separate librar...

Describe the bug I have a monorepo with yarn 3 workspaces consisting of the following (as well as other components): contracts which uses Orval to create typed react-query hooks from OpenAPI ui, a ...

10 Replies

conscious-sapphire•2y ago

Another issue: your query client is not stable

conscious-sapphire•2y ago

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

Stable Query Client | TanStack Query Docs

The QueryClient contains the QueryCache, so you'd only want to create one instance of the QueryClient for the lifecycle of your application - not a new instance on every render. Exception: It's allowed to create a new QueryClient inside an async Server Component, because the async function is only called once on the server.

unwilling-turquoise•2y ago

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

sensitive-blueOP•2y ago

@TkDodo 🔮 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 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 😭

unwilling-turquoise•2y ago

please try to reproduce it in codesandbox

sensitive-blueOP•2y ago

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

sensitive-blueOP•2y ago

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

mystifying-rgb-w2fm7q

sensitive-blueOP•2y ago

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 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

sensitive-blueOP•2y ago

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

GitHub

Unable to use react-query when hooks are created in separate librar...

like-gold•15mo ago

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? Got it, was the following in my case.

  webpack: (config, { isServer }) => {
    if (isServer) {
      config.externals = ['@tanstack/react-query', ...config.externals];
    }

    config.resolve.alias['@tanstack/react-query'] = path.resolve(
      './node_modules/@tanstack/react-query'
    );
    return config;
  },

  webpack: (config, { isServer }) => {
    if (isServer) {
      config.externals = ['@tanstack/react-query', ...config.externals];
    }

    config.resolve.alias['@tanstack/react-query'] = path.resolve(
      './node_modules/@tanstack/react-query'
    );
    return config;
  },

In next.config.js

Gaming

Programming

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

Did you find this page helpful?