React Query Devtools not rendering after migrating from Gatsby to Vite

[michecode]

Hey I recently migrated an app from Gatsby to Vite and now the React Query devtools are not showing which I'm confused by because I can't reproduce it with a stackblitz/codesandbox.

Originally I was using react-query but I version bumped to @tanstack/react-query + the devtool package because I read there were some issues previously but with no luck so I'm pretty sure there is some issue with how I'm handling the query client.

queries.jsx

import { QueryClient } from '@tanstack/react-query';
import _ from 'lodash';

// Singleton for accessing the QueryClient instance
class ReactQueryClient {
  static __instance = null;
  static instance() {
    if (!this.__instance) {
      this.__instance = new QueryClient({
        defaultOptions: {
          queries: {
            // globally default to 20 seconds
            staleTime: 1000 * 20,
          },
        },
      });
    }
    return this.__instance;
  }
}

// query helper functions

export default ReactQueryClient;
export {...};

app.jsx

// React-Query
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import ReactQueryClient from './utils/queries';
// removed rest of imports

// context providers
function AppContexts({ children }) {}

// context updaters
function AppUpdaters() {}

function App() {
  return (
    <HelmetProvider>
      <BrowserRouter>
        <RootContextProvider>
          <StyledEngineProvider injectFirst>
            <ThemeToggle>
              <QueryClientProvider client={ReactQueryClient.instance()}>
                <SnackbarProvider>
                  <AppContexts>
                    <AppUpdaters />
                    <AppLayout>
                      <Routes>
                        ...
                      </Routes>
                    </AppLayout>
                  </AppContexts>
                </SnackbarProvider>
                <ReactQueryDevtools initialIsOpen={false} />
              </QueryClientProvider>
            </ThemeToggle>
          </StyledEngineProvider>
        </RootContextProvider>
      </BrowserRouter>
    </HelmetProvider>
  );
}

export default App;

Using "@tanstack/react-query": "^4.29.12", "@tanstack/react-query-devtools": "^4.29.12", "vite": "~3.2.3"

We have a similar app runing vite v3 and react-query v3 with the devtools running fine and I can't find what's causing this issue.

[michecode]

Adding this to vite config fixed it ! Switched back to v3 as well.

  resolve: {
    alias: [
      {
        find: 'react-query/devtools',
        replacement: 'react-query/es/devtools/index',
      },
    ],
  },