I have a Next.js application (main-app) that imports and uses UI components (widgets) and API hooks from a separate repository (abc-widgets).

These widgets internally use API hooks that rely on TanStack Query for caching and Axios for requests.
I am using TanStack Query (@tanstack/react-query v5.67.3) in my Next.js app (next v13.1.6, react v18.2.0).

My widgets package (index.js) does not explicitly wrap QueryClientProvider, as I assumed I could wrap it in my main Next.js app instead.

However, when using widgets that rely on useQuery, I get the following error:

Error: No QueryClient set, useQuery cannot be used without a QueryClientProvider

Below is the simplified structure of the two repos.

next-app/
│── src/
│   ├── components/
│   ├── pages/
│   ├── layout/
│   │   ├── Layout.jsx
│   │   └── QueryProvider.jsx  <-- Wraps the app in QueryClientProvider
│   ├── client/
│   │   ├── queryClient.js
│   ├── hooks/
│   ├── styles/
│── package.json  <-- imports "@abc/widgets" and "tanstack-query"
│── next.config.js
└── tsconfig.json

widgets/
│── src/
│   ├── components/
│   │   ├── ShipmentCard.jsx  <-- Uses useQuery()
│   │   ├── CampaignCard.jsx
│   │   ├── BigTask.jsx
│   │   ├── Performance.jsx
│   ├── index.js  <-- Exports all components
│── package.json
│── tsconfig.json
│── rollup.config.js 

Relevant Code Widgets Package (@abc/widgets)

export { default as ShipmentCard } from './components/ShipmentCard';
export { default as CampaignCard } from './components/CampaignCard';
// ...other exports

Next.js App (QueryProvider.jsx)

'use client';

import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { persistQueryClient } from '@tanstack/react-query-persist-client';
import { useEffect } from 'react';
import { queryClient } from '../client/queryClient';

export function QueryProvider({ children }) {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      import('@tanstack/query-sync-storage-persister').then(({ createSyncStoragePersister }) => {
        const localStoragePersister = createSyncStoragePersister({
          storage: window.localStorage,
        });
        persistQueryClient({
          queryClient,
          persister: localStoragePersister,
        });
      });
    }
  }, []);

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
    </QueryClientProvider>
  );
}

Layout Wrapping the App (next-app/src/layout/Layout.jsx) simplified.

import { QueryProvider } from './QueryProvider';

function Layout({ children }) {
  return (
    <QueryProvider>
      <div>{children}</div>
    </QueryProvider>
  );
}

export default Layout;

✅ Confirmed that QueryProvider wraps the entire app through react dev tools – Expected this to provide a QueryClient context to all components, but components inside abc-widgets still threw the "No QueryClient set" error.

✅ Checked for multiple React instances (npm ls react) – Found that both repos use [email protected], so mismatched React versions shouldn’t be an issue.

✅ Ensured QueryClientProvider is NOT wrapped inside abc-widgets – The package only calls useQuery, relying on the provider from next-app.

✅ Tried adding @tanstack/react-query as a peerDependency in abc-widgets – Expected this to ensure a single react-query instance, but the error persisted.