Provide environment information

  System:
    OS: macOS 15.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 108.44 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.7.0 - ~/.asdf/installs/nodejs/23.7.0/bin/node
    npm: 10.9.2 - ~/.asdf/installs/nodejs/23.7.0/bin/npm
    pnpm: 10.4.1 - ~/.asdf/installs/nodejs/23.7.0/bin/pnpm
    bun: 0.5.7 - ~/.bun/bin/bun
  Browsers:
    Chrome: 133.0.6943.127
    Safari: 18.2
  npmPackages:
    @tanstack/react-query: 5.66.9 => 5.66.9
    typescript: 5.7.3 => 5.7.3

Describe the bug

Link to reproduction

https://github.com/brandongit2/trpc-tanstack-router-bug-repro/blob/main/index.ts

To reproduce

1. Clone the repro repo
2. pnpm install
3. Open index.ts
4. Type error:

   Type 'QueryClient' is not assignable to type 'QueryClient | (() => QueryClient)'.
     Type 'import("/Users/brandontsang/projects/trpc-tanstack-router-bug-repro/node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/modern/hydration-k2LfsAVL", { with: { "resolution-mode": "import" } }).b' is not assignable to type 'import("/Users/brandontsang/projects/trpc-tanstack-router-bug-repro/node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/modern/hydration-BHYO6Wdv").b'.
       Property '#private' in type 'QueryClient' refers to a different member that cannot be accessed from within type 'QueryClient'.

Additional information

This comes from the fact that @trpc/tanstack-react-query doesn't have dedicated ESM type exports.

• In my repro, I have:
  • "type": "module" in package.json
  • "moduleResolution": "nodenext" in my tsconfig.json
• When I import from @tanstack/react-query, the .d.ts files are interpereted as ESM by TypeScript, since they have dedicated ESM type declarations:
  • 
• But when I import from @trpc/tanstack-react-query, the .d.ts files are interpereted as CJS by TypeScript, since the package.json doesn't specify "type".
• When @trpc/tanstack-react-query's types import @tanstack/react-query, they come in as CJS types. @tanstack/react-query's ESM and CJS types don't seem to be compatible with one another.

It could be argued that this is also a TanStack Query bug, since their ESM and CJS types ought to be compatible with one another anyway.

Workarounds/fixes:

1. Patch @trpc/tanstack-react-query to force ESM imports:
   • Find the .d.ts file that imports @tanstack/react-query (in this repro's case, it's @trpc/tanstack-react-query/dist/internals/createOptionsProxy.d.ts)
   • add an import attribute: ...from '@tanstack/react-query' with {'resolution-mode': 'import'}
   • Type error gone!
2. Or, in the user's project, import @tanstack/react-query as CJS and override the type:
   • 
   • Type error gone!

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd be down to file a PR fixing this bug!