Error in hook because of Context retrieval in intermediate library since ESM support

[noe555]

Hi all.

Since v4.3.0, I am hitting an issue on the useQuery() hook because of a QueryClient context retrieval from a component in an intermediate library.

I have a custom library, with react, @tanstack/react-query and @tanstack/query-core defined as devDependencies, which defines a React component like this (simplified) :

const ReactQueryWrapper = <T, > (
    {
        queryKey,
        queryFunc
    }: {
        queryKey: string[];
        queryFunc: () => Promise<T>;
    }
) =>
    <ReactQueryResultWrapper result={useQuery<T>(queryKey, queryFunc)} />;

export default ReactQueryWrapper;

Where ReactQueryResultWrapper is a React component defined in the same library which renders either the success result of the query, the error, or the 'loading' state.

I transpile it using Babel, so I end up with a file like this :

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _reactQuery = require("@tanstack/react-query");

var _ReactQueryResultWrapper = _interopRequireDefault(require("./ReactQueryResultWrapper"));

var _jsxRuntime = require("react/jsx-runtime");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var ReactQueryWrapper = function ReactQueryWrapper(_ref) {
  var queryKey = _ref.queryKey,
      queryFunc = _ref.queryFunc;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactQueryResultWrapper["default"], {
    result: (0, _reactQuery.useQuery)(queryKey, queryFunc)
  });
};

var _default = ReactQueryWrapper;
exports["default"] = _default;

Then, in a 'final' app based on react create app, with the previous lib, react, @tanstack/react-query and @tanstack/query-core defined as dependencies, in my index.tsx, I have the following:

import ReactQueryWrapper  from 'my-library';


const queryClient = ...
	
createRoot(document.getElementById('root')!)
    .render(
        <React.StrictMode>            
			<QueryClientProvider client={queryClient}>
				<ReactQueryWrapper queryKey={queryKey} queryFunc={queryFunc} />
			</QueryClientProvider>            
        </React.StrictMode>
    );

When running this app (locally, with 'yarn start'), since v4.3.0 (and all subsequent versions), I have the following error

'
Uncaught Error: No QueryClient set, use QueryClientProvider to set one
useQueryClient QueryClientProvider.tsx:48
useBaseQuery useBaseQuery.ts:32
useQuery useQuery.ts:139
ReactQueryWrapper ReactQueryWrapper.js:24
'.

This used to work since v4.0.1, up to v4.2.3, and thus, I cannot upgrade the @tanstack/query library to any following versions.

By looking at https://github.com/TanStack/query/releases?page=3, i suspect this is due to the switch to ESM support (#4092), but I am not an expert at all on javascript modules.

I made sure that I do not have multiple versions of either react nor @tanstack/query installed in the node_modules in the final app.

It is likely that moving the useQuery() hook call in the component in the final app would fix the issue, but as the components in the intermediate library do much more than above, this would lead to a lot of duplicate code in the parent components.

It looks like a bug to me, but I wanted to get some feedbacks before opening a ticket.

Has someone experienced the issue ?

Thanks a lot for any feedbacks and help.

[TkDodo]

I have a custom library, with react, @tanstack/react-query and @tanstack/query-core defined as devDependencies

1. if you have react-query, you don't need to add the query-core separately, because react-query comes with the core bundled.

2. I hope you mean peerDependency, not devDependency? Likely, you want both peer & dev.

Further, this really depends on your setup. Is the lib published to npm and then consumed? Is it part of a monorepo? If so, which monorepo setup: yarn workspaces, pnpm, nx, something else? It also depends on the bundler you're using (next, CRA, something custom with webpack, vite ?)

---

I made sure that I do not have multiple versions of either react nor @tanstack/query installed in the node_modules in the final app.

so the very simple explanation that is almost always true for this behaviour is that you in fact, somehow, have two versions of react-query floating around. Both versions then do React.createContext(), and thus expect to work within "their context". When you call useQuery, there is no provider for that context, because there is only a provider available from the other context.

[noe555]

Hi TkDodo, thank you for your response.

The lib is 'managed by hand, and manually linked' with file symbolic links inside node_modules.
In 'final' components like in the index.ts, the import path resolves exactly to the file given above (the one that starts with "Object.defineProperty(...)").

The final app, based on React Create App, uses webpack internally.

After a second thought, it may be that the

var _reactQuery = require("@tanstack/react-query");

resolves to a different file (esm vs non-esm) than the

import {QueryClient, QueryClientProvider} from "@tanstack/react-query";

even if there is only one library version.

Anway, I have decided to go to the solution to move all the hooks to the parent components, even at the price of duplicates for the time being, the long-term solution would be to update my library to have a proper setup with proper modules definitions as well.

Thanks again for your time.