hashQueryKey is not exported from tanstack/react-query

[javier-sauma-rocketlab]

Describe the bug

I was following a video to use nextj.js 13 app router, trcp, react-query and all was good until i try to call my query from the client and sudenly all crash. I try to find a solution on google but isn't reported yet. Then I check and find that react-query have released just days before this post to 5.0.0. I did a downgrade to 4.36.1 and now all work properly.

PD: I will add more info later

Ref to video follow all steps until min 7:30

trace of the error

./node_modules/.pnpm/@trpc+react-query@10.40.0_@tanstack+react-query@5.0.0_@trpc+client@10.40.0_@trpc+server@10.40_j5b6dh2qmadaikfcthvzn2bani/node_modules/@trpc/react-query/dist/createHooksInternal-f1d4019d.mjs
Attempted import error: 'hashQueryKey' is not exported from '@tanstack/react-query' (imported as 'hashQueryKey').

Import trace for requested module:
./node_modules/.pnpm/@trpc+react-query@10.40.0_@tanstack+react-query@5.0.0_@trpc+client@10.40.0_@trpc+server@10.40_j5b6dh2qmadaikfcthvzn2bani/node_modules/@trpc/react-query/dist/createHooksInternal-f1d4019d.mjs
./node_modules/.pnpm/@trpc+react-query@10.40.0_@tanstack+react-query@5.0.0_@trpc+client@10.40.0_@trpc+server@10.40_j5b6dh2qmadaikfcthvzn2bani/node_modules/@trpc/react-query/dist/index.mjs
./src/app/_trpc/client.ts
./src/app/_trpc/Provider.tsx

package.json

  "dependencies": {
    "@tanstack/react-query": "^5.0.0",
    "@trpc/client": "^10.40.0",
    "@trpc/react-query": "^10.40.0",
    "@trpc/server": "^10.40.0",
    "next": "13.5.6",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "13.5.6",
    "postcss": "^8",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

Your minimal, reproducible example

check the code here
https://github.com/jsaumap/next-trpc-start/tree/bug-react-query

Steps to reproduce

Expected behavior

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Tanstack Query adapter

react-query

TanStack Query version

v5.0.0

TypeScript version

No response

Additional context

No response

[raymclee]

I got the same issue

[rekdt]

Open your package.json file, locate the line with @tanstack/react-query, and change the version number to ^4.35.3:

"@tanstack/react-query": "^4.35.3",

Then run: pnpm install

[javier-sauma-rocketlab]

already did downgrade, thanks. Is more for report the issue

[TkDodo]

I forgot to list this change in the migration guide, sorry for that. hashQueryKey was merely renamed to hashKey because it also hashes mutation keys.

docs are updated already: https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#hashquerykey-has-been-renamed-to-hashkey

but note that you cannot use trpc v10 with react-query v5, they are structurally incompatible. the trpc team is working on v11, which will be RQ v5 compatible. You can already try it out with the @trpc/react-query@next tag.

[jakhongir-abdukhamidov]

I forgot to list this change in the migration guide, sorry for that. hashQueryKey was merely renamed to hashKey because it also hashes mutation keys.

docs are updated already: https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#hashquerykey-has-been-renamed-to-hashkey

but note that you cannot use trpc v10 with react-query v5, they are structurally incompatible. the trpc team is working on v11, which will be RQ v5 compatible. You can already try it out with the @trpc/react-query@next tag.

After this, I got the SyntaxError: The requested module '@tanstack/react-query' does not provide an export named 'Hydrate'

[TkDodo]

@jakhongir-abdukhamidov are you going to make me copy every piece of the migration guide here? please read it:

https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#hydration-api-changes

[jakhongir-abdukhamidov]

@jakhongir-abdukhamidov are you going to make me copy every piece of the migration guide here? please read it:

https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#hydration-api-changes

Thanks for your response but downgrading to ^4.35.3 working for now.

[Jeff-Ad]

@javier-sauma-rocketlab is it working for you now ?
Because I've got same issues and after following the possible solutions here it is still not working..
still same issues

[TkDodo]

@Jeff-Ad what "same issue"? Are you using trpc like in the OP? If so, it can't work with v5 unless you upgrade to trpc@next. Everything else should be solved. If not, please show a reproduction

[Jeff-Ad]

@TkDodo yes I read through the solution given so after doing a downgrade the result below is what I get

my package.json file

Before the downgrade this is what I get
./node_modules/.pnpm/@trpc+react-query@10.40.0_@tanstack+react-query@5.0.0_@trpc+client@10.40.0_@trpc+server@10.40_j5b6dh2qmadaikfcthvzn2bani/node_modules/@trpc/react-query/dist/createHooksInternal-f1d4019d.mjs
Attempted import error: 'hashQueryKey' is not exported from '@tanstack/react-query' (imported as 'hashQueryKey').

Import trace for requested module:
./node_modules/.pnpm/@trpc+react-query@10.40.0_@tanstack+react-query@5.0.0_@trpc+client@10.40.0_@trpc+server@10.40_j5b6dh2qmadaikfcthvzn2bani/node_modules/@trpc/react-query/dist/createHooksInternal-f1d4019d.mjs
./node_modules/.pnpm/@trpc+react-query@10.40.0_@tanstack+react-query@5.0.0_@trpc+client@10.40.0_@trpc+server@10.40_j5b6dh2qmadaikfcthvzn2bani/node_modules/@trpc/react-query/dist/index.mjs
./src/app/_trpc/client.ts
./src/app/_trpc/Provider.tsx

[TkDodo]

why do you think that v5 devtools would work with v4 of query ?

[Jeff-Ad]

@TkDodo Thank you so much ...my bad ... I was thinking since its just the dev tool it should work...

[jerommiole]

Open your package.json file, locate the line with @tanstack/react-query, and change the version number to ^4.35.3:

"@tanstack/react-query": "^4.35.3",

Then run: pnpm install

THIS ONE SAVE ME!! Thank you!