So I am a big dumb dumb. I have a couple of projects all using react-query, and some using @tanstack/react-query.

On one of those I encountered those errors, and here's the code.

"use client";

import {QueryClient, QueryClientProvider} from "@tanstack/react-query"; import React from "react";

interface RootClientComponentProps { children: React.ReactNode; }

// This makes sure this component and its children are rendered on the client-side export default function RootClientProvider({ children }: RootClientComponentProps) { const queryClient = new QueryClient();

return {children}; }

And here's where I'm using the useQuery.

import {useQuery} from "react-query";

const { data } = useQuery({ queryKey: ["yadayada"], queryFn: async () => { whatever(); } });

Notice the error?

It's basically because on one side I'm importing as

import {QueryClient, QueryClientProvider} from "@tanstack/react-query";

While the other is:

import {useQuery} from "react-query";

If your project uses one or the other, pick one and use it, don't mix two imports. If you're working with the newest version, just import everything from @tanstack/react-query.

That is it.