Adding QueryClientProvider to react project giving error

[kssingh600]

I have recently created a react app and then included the QueryClientProvider to the index.js. However on server start, localhost:3000 is showing blank screen and when I checked the console I got an error stating Uncaught TypeError: Cannot read properties of null (reading 'useEffect')

Here are the contents of index.js file:

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    import {  QueryClient, QueryClientProvider} from 'react-query';
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    
    const queryClient = new QueryClient() ;
    
    root.render(
        <React.StrictMode>
          <QueryClientProvider client={queryClient}>
            <App />
          </QueryClientProvider>
        </React.StrictMode>
    );
    reportWebVitals();

And here is the Console error :

      Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
          1. You might have mismatching versions of React and the renderer (such as React DOM)
          2. You might be breaking the Rules of Hooks
          3. You might have more than one copy of React in the same app
          See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    
     Uncaught TypeError: Cannot read properties of null (reading 'useEffect')
        at Object.useEffect (react.development.js:1632:1)
        at QueryClientProvider (QueryClientProvider.js:36:1)
        at renderWithHooks (react-dom.development.js:16175:1)
        at mountIndeterminateComponent (react-dom.development.js:20913:1)
        at beginWork (react-dom.development.js:22416:1)
        at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
        at invokeGuardedCallback (react-dom.development.js:4274:1)
        at beginWork$1 (react-dom.development.js:27405:1)
        at performUnitOfWork (react-dom.development.js:26513:1)

I am using the following versions of react and react-query:

• react: ^18.1.0
• react-query:
  
  

Please help me understand the issue.
P.S. I have tried this in two different PCs and is facing the same issue in both

Thanks

[TkDodo]

can you share the repo?

[kssingh600]

Here is the repo link: https://github.com/kssingh600/react-query-demo/tree/master

Thanks

[TkDodo]

not entirely sure what you mean. For one, react-query is missing as a dependency in package.json. I added:

"react-query": "^3.39.1",

did npm start and it works just fine?

[kssingh600]

Thanks @TkDodo. I have added react-query as a dependency and it is working fine now. Though, I did npm install earlier, due to some reasons dependency might not have been added properly. With fresh npm i react-query, it is working fine now.

[majidmohammadi0830]

Thank you very much @TkDodo. The problem was solved by deleting the node_modules folder and running npm i --force on my project.