[vue-query] `Devtools is not mounted` with `@vue/server-renderer@3.5.31` while SSR

[n0099]

Describe the bug

Due to renderToString() of @vue/server-renderer now will invoke cleanupContext(): https://github.com/vuejs/core/blame/fa23116437250b3fdec41112f276211cb284136e/packages/server-renderer/src/renderToString.ts#L98 that introduced in vuejs/core#14548,

query/packages/query-devtools/src/TanstackQueryDevtools.tsx

Line 153 in 67b12ae

throw new Error('Devtools is not mounted')

will always get thrown.

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-query-vodk6pjy?file=src%2FApp.vue

Steps to reproduce

1. Open the preview of port 3000.
2. Checkout the console of browser's devtools.

3. Uncaught (in promise) Error: Devtools is not mounted
    unmount @tanstack_vue-query-devtools.js:157
    setup @tanstack_vue-query-devtools.js:350
    stop chunk-6BD2MEKE.js:483
    cleanupContext @vue_server-renderer.js:598
    renderToString @vue_server-renderer.js:949
    setup App.vue:13
    createHook chunk-6BD2MEKE.js:5324
    callWithErrorHandling chunk-6BD2MEKE.js:2412
    callWithAsyncErrorHandling chunk-6BD2MEKE.js:2419
    __weh chunk-6BD2MEKE.js:5304
    flushPostFlushCbs chunk-6BD2MEKE.js:2597
    render2 chunk-6BD2MEKE.js:9042
    mount chunk-6BD2MEKE.js:6466
    mount chunk-6BD2MEKE.js:12725
    <anonymous> main.ts:5

Expected behavior

Not throwing.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: NixOS
• Browser: Firefox
• Version: 148

Tanstack Query adapter

vue-query

TanStack Query version

5.96.1

TypeScript version

5.8.3

Additional context

No response

[n0099]

A workaround in Nuxt is wrapping <VueQueryDevtools> inside <ClientOnly> so skipping render it while SSR.

[n0099]

Upstream has been reverted: vuejs/core#14674 due to vuejs/core#14548 (comment), so updating @vue/server-renderer also fixes this.