react query error when I wrap connect-query

[mbpmohsen]

I used document example but there is problem:

import { createConnectTransport } from "@connectrpc/connect-web";
import { TransportProvider } from "@connectrpc/connect-query";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const finalTransport = createConnectTransport({
  baseUrl: "https://demo.connectrpc.com",
});

const queryClient = new QueryClient();

function App() {
  return (
    <TransportProvider transport={finalTransport}>
      <QueryClientProvider client={queryClient}>
        <YourApp />
      </QueryClientProvider>
    </TransportProvider>
  );
}

  VITE v6.0.5  ready in 119 ms

  ➜  Local:   http://localhost:6060/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
✘ [ERROR] No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/lib/index.mjs" for import "skipToken"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufb_nqp5sdjwoq63b63jsbpy6lnuwy/node_modules/@connectrpc/connect-query-core/dist/esm/create-infinite-query-options.js:14:9:
      14 │ import { skipToken } from "@tanstack/query-core";
         ╵          ~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/lib/index.mjs" for import "skipToken"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufb_nqp5sdjwoq63b63jsbpy6lnuwy/node_modules/@connectrpc/connect-query-core/dist/esm/create-query-options.js:15:9:
      15 │ import { skipToken } from "@tanstack/query-core";
         ╵          ~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/lib/index.mjs" for import "skipToken"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufb_nqp5sdjwoq63b63jsbpy6lnuwy/node_modules/@connectrpc/connect-query-core/dist/esm/index.js:20:9:
      20 │ export { skipToken } from "@tanstack/query-core";
         ╵          ~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-query/build/lib/index.mjs" for import "useSuspenseInfiniteQuery"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufbuild+_lgpogrpvfx72z2vyohy5dslk5u/node_modules/@connectrpc/connect-query/dist/esm/use-infinite-query.js:15:49:
      15 │ import { useInfiniteQuery as tsUseInfiniteQuery, useSuspenseInfiniteQuery as tsUseSuspenseInfiniteQuery, } from "@tanstack/react-query";
         ╵                                                  ~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-query/build/lib/index.mjs" for import "useSuspenseQuery"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufbuild+_lgpogrpvfx72z2vyohy5dslk5u/node_modules/@connectrpc/connect-query/dist/esm/use-query.js:15:33:
      15 │ import { useQuery as tsUseQuery, useSuspenseQuery as tsUseSuspenseQuery, } from "@tanstack/react-query";
         ╵                                  ~~~~~~~~~~~~~~~~

12:34:07 PM [vite] (client) error while updating dependencies:
Error: Build failed with 5 errors:
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufb_nqp5sdjwoq63b63jsbpy6lnuwy/node_modules/@connectrpc/connect-query-core/dist/esm/create-infinite-query-options.js:14:9: ERROR: No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/lib/index.mjs" for import "skipToken"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufb_nqp5sdjwoq63b63jsbpy6lnuwy/node_modules/@connectrpc/connect-query-core/dist/esm/create-query-options.js:15:9: ERROR: No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/lib/index.mjs" for import "skipToken"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufb_nqp5sdjwoq63b63jsbpy6lnuwy/node_modules/@connectrpc/connect-query-core/dist/esm/index.js:20:9: ERROR: No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/lib/index.mjs" for import "skipToken"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufbuild+_lgpogrpvfx72z2vyohy5dslk5u/node_modules/@connectrpc/connect-query/dist/esm/use-infinite-query.js:15:49: ERROR: No matching export in "node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-query/build/lib/index.mjs" for import "useSuspenseInfiniteQuery"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufbuild+_lgpogrpvfx72z2vyohy5dslk5u/node_modules/@connectrpc/connect-query/dist/esm/use-query.js:15:33: ERROR: No matching export in "node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-query/build/lib/index.mjs" for import "useSuspenseQuery"
    at failureErrorWithLog (/Users/mohsen/Projects/snappKitchen/finance-panel/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1476:15)
    at /Users/mohsen/Projects/snappKitchen/finance-panel/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:945:25
    at /Users/mohsen/Projects/snappKitchen/finance-panel/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1354:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
12:35:10 PM [vite] (client) page reload src/main.tsx
✘ [ERROR] No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/lib/index.mjs" for import "skipToken"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufb_nqp5sdjwoq63b63jsbpy6lnuwy/node_modules/@connectrpc/connect-query-core/dist/esm/create-infinite-query-options.js:14:9:
      14 │ import { skipToken } from "@tanstack/query-core";
         ╵          ~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/lib/index.mjs" for import "skipToken"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufb_nqp5sdjwoq63b63jsbpy6lnuwy/node_modules/@connectrpc/connect-query-core/dist/esm/create-query-options.js:15:9:
      15 │ import { skipToken } from "@tanstack/query-core";
         ╵          ~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/lib/index.mjs" for import "skipToken"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufb_nqp5sdjwoq63b63jsbpy6lnuwy/node_modules/@connectrpc/connect-query-core/dist/esm/index.js:20:9:
      20 │ export { skipToken } from "@tanstack/query-core";
         ╵          ~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-query/build/lib/index.mjs" for import "useSuspenseInfiniteQuery"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufbuild+_lgpogrpvfx72z2vyohy5dslk5u/node_modules/@connectrpc/connect-query/dist/esm/use-infinite-query.js:15:49:
      15 │ import { useInfiniteQuery as tsUseInfiniteQuery, useSuspenseInfiniteQuery as tsUseSuspenseInfiniteQuery, } from "@tanstack/react-query";
         ╵                                                  ~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-query/build/lib/index.mjs" for import "useSuspenseQuery"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufbuild+_lgpogrpvfx72z2vyohy5dslk5u/node_modules/@connectrpc/connect-query/dist/esm/use-query.js:15:33:
      15 │ import { useQuery as tsUseQuery, useSuspenseQuery as tsUseSuspenseQuery, } from "@tanstack/react-query";
         ╵                                  ~~~~~~~~~~~~~~~~

12:35:11 PM [vite] (client) error while updating dependencies:
Error: Build failed with 5 errors:
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufb_nqp5sdjwoq63b63jsbpy6lnuwy/node_modules/@connectrpc/connect-query-core/dist/esm/create-infinite-query-options.js:14:9: ERROR: No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/lib/index.mjs" for import "skipToken"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufb_nqp5sdjwoq63b63jsbpy6lnuwy/node_modules/@connectrpc/connect-query-core/dist/esm/create-query-options.js:15:9: ERROR: No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/lib/index.mjs" for import "skipToken"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufb_nqp5sdjwoq63b63jsbpy6lnuwy/node_modules/@connectrpc/connect-query-core/dist/esm/index.js:20:9: ERROR: No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@tanstack/query-core/build/lib/index.mjs" for import "skipToken"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufbuild+_lgpogrpvfx72z2vyohy5dslk5u/node_modules/@connectrpc/connect-query/dist/esm/use-infinite-query.js:15:49: ERROR: No matching export in "node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-query/build/lib/index.mjs" for import "useSuspenseInfiniteQuery"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@bufbuild+_lgpogrpvfx72z2vyohy5dslk5u/node_modules/@connectrpc/connect-query/dist/esm/use-query.js:15:33: ERROR: No matching export in "node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-query/build/lib/index.mjs" for import "useSuspenseQuery"
    at failureErrorWithLog (/Users/mohsen/Projects/snappKitchen/finance-panel/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1476:15)
    at /Users/mohsen/Projects/snappKitchen/finance-panel/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:945:25
    at /Users/mohsen/Projects/snappKitchen/finance-panel/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1354:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

[paul-sachs]

Based on those errors, it looks like you're using it with react-query@4. connect-query requires react-query >= 5. There should have been peer dependency warnings when installing it with anything other than [email protected]

What version of @tanstack/query-core or @tanstack/react-query are you using?

[paul-sachs]

Closing as stale. Please reopen if updating to react-query@v5 (or downgrading connect-query to 0.x) doesn't resolve the issue.