question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

^2.9.2 breaks React with react-query

See original GitHub issue

Describe the bug

We have a React app with Vite, it worked perfectly on 2.9.1.

After updating to anything above ^2.9.2 we get the following console error when starting the app:

The above error occurred in the <ForwardRef(ReactQueryDevtoolsPanel2)> component:

    at ReactQueryDevtoolsPanel2 (http://localhost:3000/node_modules/.vite/deps/react-query_devtools.js?v=b815b532:5078:33)
    at ThemeProvider (http://localhost:3000/node_modules/.vite/deps/react-query_devtools.js?v=b815b532:4390:24)
    at aside
    at ReactQueryDevtools (http://localhost:3000/node_modules/.vite/deps/react-query_devtools.js?v=b815b532:4870:32)
    at Parent (http://localhost:3000/src/index.tsx:42:3)
    at QueryClientProvider2 (http://localhost:3000/node_modules/.vite/deps/react-query.js?v=b815b532:2642:21)
    at Provider (http://localhost:3000/node_modules/.vite/deps/jotai.js?v=b815b532:680:3)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

While trying to render:

import { ReactQueryDevtools } from 'react-query/devtools';
<ReactQueryDevtools initialIsOpen={false} />

The error comes from the package react-query, which afaik hasn’t made any recent changes.

Any ideas why this is happening? The error goes away if we pin to 2.9.1.

My hunch is that the latest update must’ve broken some React functionality, but this is the only place where that functionality is used.

Reproduction

https://stackblitz.com/edit/vitejs-vite-rhq817?file=src%2Fmain.tsx&terminal=dev

Wait for page to load, error will appear in the browser console.

System Info

System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 4.00 GB / 7.65 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.18 - /usr/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  npmPackages:
    @vitejs/plugin-react: ^1.2.0 => 1.3.1 
    vite: ^2.9.2 => 2.9.2

Used Package Manager

npm

Logs

No response

Validations

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
patak-devcommented, Apr 14, 2022

Closed in vite@2.9.5, where #7582 has been reverted

1reaction
patak-devcommented, Apr 14, 2022

Thanks for the reports. We may need to revert https://github.com/vitejs/vite/pull/7582, and have another take at it in Vite v3.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Trends: Interview with React Query creator Tanner Linsley
Tanner Linsley, creator of React Query and React Table, talks us through some of the top trends in the ReactJS and web development...
Read more >
React Query - Hooks for fetching, caching and updating ...
Performant and powerful data synchronization for React. Fetch, cache and update data in your React and React Native applications all without touching any ......
Read more >
React-admin - Querying the API - Marmelab
It displays stale data while fetching up-to-date data, leading to a snappier UI. React-query offers 2 main hooks to interact with the dataProvider:...
Read more >
React Query Error Handling | TkDodo's blog
React Query Error Handling ... Handling errors is an integral part of working with asynchronous data, especially data fetching. We have to face...
Read more >
react-query - NPM Package Overview - Socket.dev
Hooks for managing, caching and syncing asynchronous and remote data in React. Version: 3.39.2 was published by tannerlinsley.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found