React Query 3.19.1 not working with Vite 2.4.4 | No QueryClient set, use QueryClientProvider to set one

[acousticclown]

Description
I bootstrapped a React App with Vite 2.4.4 and on using React Query it shows an error however the same react code works with CRA.

To Reproduce
Steps to reproduce the behavior:

1. Create a simple react app with Vite.
2. Add react-query and Axios packages in your app.
3. Paste the code given below in App.js

import axios from "axios";
import React from "react";
import { useQuery, QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient();
function App() {
  const { isLoading, error, data } = useQuery("dogs", () => {
    axios("https://random.dog/woof.json");
  });
if(error){
  console.log(error.message);
}
if(isLoading){
  console.log("Loading...");
}
  return (
    <div>
      <QueryClientProvider client={queryClient}>
          <img src={data.data.url} />
      </QueryClientProvider>
    </div>
  );
}
export default App;

4. Run the dev server, See the error in the console. Page goes blank.

Expected behavior

1. On successful fetch from the API, It must show a random dog image on the page.
2. While fetching the data, it must show "Loading..." in the console.
3. If any error occurs, it must show the error message in the console.

Screenshots

Desktop Configurations:

• OS: Windows 10 Home
• Browser: Chrome
• Node Version: 16.6.0

Additional details

The error in the console says, "No QueryClient set, use QueryClientProvider to set one", But it is clearly visible in the code I provided, that an instance of QueryClient is set to QueryClientProvided.

[TkDodo]

the code clearly shows that you are using useQuery outside of the QueryClientProvider (which is a react context provider), and useQuery relies on that context.

it's the reason why all examples:

• setup an App with the Provider, which renders another component like <Example />
• that other component calls useQuery, so that the call to the hook is inside the Provider tree.

This is standard react-context behaviour.

[acousticclown]

@TkDodo Thanks for clearing that out. That solved the error I was having, but now I got a new error. The data field is undefined, I tried with several API calls but the error remains the same
Here is a screenshot

[TkDodo]

data can be undefined for various reasons, for example, because the query is loading, or possibly you have not returned the data in the format you are expecting from the queryFn. it's impossible to say from just a screenshot. please create a codesandbox reproduction with your issue, then I'm happy to take a look at it.