I am creating a new repository where I will have some logic, components and providers that will be the same in all repositories that I have. Right now, everything it's working less the QueryClientProvider

An example:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: false,
    },
  },
});

export function GlobalProvider({ children }: { children: ReactNode }) {
  return (
    <ConfigProvider theme={themeConfiguration}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </ConfigProvider>
  );
}

I am exporting the provider in my shared repository. My vite configuration for the shared repository.

export default defineConfig({
  plugins: [
    react(),
  ],

  build: {
    target: 'es2022',
    lib: {
      entry: resolvePath('src/index.ts'),
      name: 'app-shared',
      formats: ['es', 'umd'],
      fileName: format => `app-shared.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'react-router-dom', '@tanstack/react-query'],
    },  },
});

When I add the GlobalProvider in my first app that will consume this provider I get this error

Error: No QueryClient set, use QueryClientProvider to set one

PS: In my shared repository all the major dependencies like react, @tanstack/react-query are in the peerDependencies to don't have conflicts.

Any suggestions what could be?

I am creating a new repository where I will have some logic, components and providers that will be the same in all repositories that I have. Right now, everything it's working less the QueryClientProvider

An example:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: false,
    },
  },
});

export function GlobalProvider({ children }: { children: ReactNode }) {
  return (
    <ConfigProvider theme={themeConfiguration}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </ConfigProvider>
  );
}

I am exporting the provider in my shared repository. My vite configuration for the shared repository.

export default defineConfig({
  plugins: [
    react(),
  ],

  build: {
    target: 'es2022',
    lib: {
      entry: resolvePath('src/index.ts'),
      name: 'app-shared',
      formats: ['es', 'umd'],
      fileName: format => `app-shared.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'react-router-dom', '@tanstack/react-query'],
    },  },
});

When I add the GlobalProvider in my first app that will consume this provider I get this error

Error: No QueryClient set, use QueryClientProvider to set one

PS: In my shared repository all the major dependencies like react, @tanstack/react-query are in the peerDependencies to don't have conflicts.

Any suggestions what could be?

• reactjs
• vite
• react-query
• tanstackreact-query

2 Answers 2

I had this problem, and if I remember correctly, what solved it was described here "In a few cases, you might be importing from 'react-query' in one place and '@tanstack/react-query' in another."

Changing from react-query to @tanstack/react-query solved it for me.

I found an answer for now So, for some reason, I should not add the dependency @tanstack/react-query on repos that will consume my shared repo. After it removed, it works fine