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

[ccreusat]

Hello !

I have a bunch of 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.

Any idea?

[TkDodo]

can you show a reproduction please

[ccreusat]

Yes,

Repo

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

The main component is exported for use as an external library/component

So I have two vite config files :

• vite.config.ts > app
• vite.config.lib.ts > lib

I just figured out that I have the error when building in lib mode and with the plugin dts. So maybe, it has nothing to do with React Query.

I'm going to dig deeper because I have the same issue on our UI library edifice-ui with two hooks :

• useSession
• useConf

src/core/useConf/useConf.ts:4:25 - error TS2742: The inferred type of 'useConf' 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.

4 export default function useConf({ appCode }: { appCode: App }) {
                          ~~~~~~~
src/core/useSession/useSession.ts:4:25 - error TS2742: The inferred type of 'useSession' 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.

4 export default function useSession() {

I didn't have this error with v4..

[TkDodo]

which version of pnpm are you using?

could be because of how tsup creates declaration files. @lachlancollins fyi

[ccreusat]

I'm using pnpm 8.6.6

[lachlancollins]

@TkDodo this might be related to #6318 - @crutchcorn and I have a solution on the way

[ccreusat]

Just checking, vite-plugin-dts and in their README about Type errors that are unable to infer types from packages in node_modules

So following, this info, doing this in vite config file is working in our UI library

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

but not working in our app explorer... I'm still investigating

[jfrader]

Having the same issue exporting inferred UseInfiniteQueryOptions and exporting hooks with mutations inside.

[jfrader]

(Only after upgrading to v5)

[ducan-ne]

Having the same issue here. Tried upgrade latest typescript but couldn't help
Update: Updated "moduleResolution": "node", solved this issue

[fabricio21x]

this solved it for me too

[vaawebdev-ozee]

Thanks a lot

[ksyksy815]

👍

[hamanuha]

I'm having the same issue after upgrading to v5.
Update: Upgrading to latest typescript (5.4) solved it for me.

[jaocfilho]

Have anyone found a workaround for this on monorepos? I can't set "moduleResolution": "node" because it will not recognize my packages imports.

[alveshelio]

I was having the same issue in a Turbo monorepo, setting "moduleResolution": "node" in apps/my-app tsconfig.json file did solved the issue for me.

[nader-eloshaiker]

Try using node16 instead of node. Typescript says this about using node

'node10' (previously called 'node') for Node.js versions older than v10, which only support CommonJS require. You probably won’t need to use node10 in modern code.

[IbrahimIjai]

Had a lot of hooks in a package in my turbo repo

Fix with "moduleResolution": "node" first, the error still remains in some of the hooks

after updating my typescript to the latest version "typescript": "5.4.5", my package build successfully

Thanks guys

[Kotpes]

Can confirm, issue goes away after updating to "typescript": "5.4.5"