^2.9.2 breaks React with react-query

[leo-petrucci]

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

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

Maybe the same as #7721?

[leo-petrucci]

Maybe the same as #7721?

I don't think there exists a way to apply the Vue workaround for React unfortunately :/

[targos]

I worked around it like this in my app:

  let resolveAliases: AliasOptions = [
    // TODO: remove when https://github.com/vitejs/vite/issues/7721 is fixed.
    {
      find: 'react-query/devtools',
      replacement: 'react-query/es/devtools/index',
    },
  ];

[leo-petrucci]

I worked around it like this in my app:

  let resolveAliases: AliasOptions = [
    // TODO: remove when https://github.com/vitejs/vite/issues/7721 is fixed.
    {
      find: 'react-query/devtools',
      replacement: 'react-query/es/devtools/index',
    },
  ];

Yep, this works, thank you! I've got mine like this:

  resolve: {
    alias: {
      'react-query/devtools': 'react-query/es/devtools/index',
    },
  },

However I think I'm probably just going to pin 2.9.1 for the foreseeable future 😂

[patak-dev]

Thanks for the reports. We may need to revert #7582, and have another take at it in Vite v3.

[cmdcolin]

I'm not sure if it's related but I also found pinning to 2.9.1 was helpful cause I found 2.9.2 broke https://github.com/cmdcolin/vite-jbrowse-react-linear-genome-view/pull/1 (this is not a minimal repro) hard to say exactly why it broke, the error message is related to some internal typechecking system (mobx-state-tree)...could be an ESM vs cjs type thing perhaps but I wouldn't know without investigating further

[patak-dev]

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