Cannot read properties of null (reading 'useRef') with Vite Module Federation

[muhammetbilgin]

Describe the bug

We have a astro based micro frontend app. We want to use tanstack query on some micro app. When i tried integrate tanstack to app its works fine until call app from host app with remote entry.

MF App

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
function App() {
  return (
    <QueryClientProvider client={queryClient!}>
      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
        <main className="w-[90vw] mx-auto h-screen py-4   ">
          <Header />
          <section className="grid grid-cols-3 mt-4">
            <LineSelector />
            <div className="col-span-2">
              <HelpersActions />
            </div>
          </section>
          <section className="py-4" />
          <DataTable columns={columns} data={payments} />
        </main>
      </ThemeProvider>
    </QueryClientProvider>
  );
}

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import path from 'path';
import federation from '@originjs/vite-plugin-federation';

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    target: 'esnext',
    cssCodeSplit: false,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  plugins: [
    react(),
    federation({
      name: 'mfKiosks',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App',
      },
      shared: ['react', 'react-dom', 'zustand', '@tanstack/react-query', 'axios'],
    }),
  ],
});

Your minimal, reproducible example

Steps to reproduce

1.Create a app with vite
2.Add Module federation to app
3.Define configs for remoteEntry
4.Add Tanstack query to existing app
5.Edit config file for tanstack shared

Expected behavior

I want to use tanstack query with vite module federation

How often does this bug happen?

None

Screenshots or Videos

Platform

Browser: Brave,
OS:Windows 10

Tanstack Query adapter

react-query

TanStack Query version

5.44.0

TypeScript version

No response

Additional context

No response

[TkDodo]

Thank you for filing this issue, but we need more information before looking into this.

Specifically, a minimal, standalone, runnable reproduction is needed - preferably with codesandbox or stackblitz. If your issue is TypeScript related, prefer a TypeScript playground.

We'll close this issue for now, but we'll certainly re-open it if there is a proper reproduction.