Typescript error after updating to React Query v5 : "The inferred type of [...]"

[ccreusat]

Describe the bug

Hello !

I have a bunch of React Query v5 Queries and Mutations exported as custom hooks:

export const useActions = () => {
  const config = useStoreContext((state) => state.config);

  return useQuery<Record<string, boolean>, Error, IAction[]>({
    queryKey: ["actions"],
    queryFn: async () => {
      const actionRights = config?.actions.map((action) => action.workflow);
      const availableRights = await sessionHasWorkflowRights(
        actionRights as string[],
      );
      return availableRights;
    },
    select: (data) => {
      return config?.actions.map((action) => ({
        ...action,
        available: data[action.workflow],
      })) as IAction[];
    },
    staleTime: Infinity,
    enabled: !!config,
  });
};

Everything worked fine in v4 but after updating in v5, I have this typescript error :

error TS2742: The inferred type of 'useSearchContext' cannot be named without a reference to '../../../node_modules/@tanstack/react-query/build/modern/types'. This is likely not portable. A type annotation is necessary

To avoid the error, I have to declare the return type as below :

export const useActions = (): UseQueryResult<IAction[], Error> => {...}

For info, I'm using React Query 5.8.4 and I mentioned the issue here : https://github.com/TanStack/query/discussions/6670

I used this in our ui library and it worked...

dts({
      compilerOptions: {
        baseUrl: ".",
        paths: {
          "@tanstack/react-query": ["node_modules/@tanstack/react-query"],
        },
      },
    })

But it is not working on our app explorer

Any help ?

Reproduction

https://github.com/opendigitaleducation/explorer/tree/dev/frontend

Steps to reproduce

• clone
• cd frontend
• pnpm install
• pnpm build-lib

System Info

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M2
    Memory: 78.83 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
    pnpm: 8.6.6 - ~/.nvm/versions/node/v18.16.1/bin/pnpm
  Browsers:
    Brave Browser: 112.1.50.121
    Chrome: 120.0.6099.199
    Safari: 16.4
  npmPackages:
    @vitejs/plugin-react: 4.2.0 => 4.2.0 
    @vitejs/plugin-react-swc: 3.5.0 => 3.5.0 
    vite: 4.5.1 => 4.5.1 
    vite-plugin-dts: 3.6.0 => 3.6.0

Validations

• [X] Read the FAQ.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[qmhc]

Maybe you need to manually import UseQueryResult from @tanstack/react-query:

import { useQuery } from '@tanstack/react-query'

import type { UseQueryResult } from '@tanstack/react-query'

export const useActions = (): UseQueryResult => {
  // ...
}