fix(vue-query-devtools): guard unmount with mounted flag to prevent SSR crash

[mixelburg]

Fixes #10374

Problem

VueQueryDevtools and VueQueryDevtoolsPanel call devtools.unmount() in onScopeDispose. In SSR, @vue/server-renderer calls cleanupContext() after renderToString() (introduced in vuejs/core#14548), which disposes the Vue scope before onMounted ever fires — isMounted is still false at that point and unmount() throws Error: Devtools is not mounted.

Fix

Track mount state locally with a mounted flag that is set to true inside onMounted. The onScopeDispose callback only calls unmount() when the devtools were actually mounted. No changes to the TanstackQueryDevtools class itself.

Applied to both devtools.vue and devtoolsPanel.vue.

Summary by CodeRabbit

• Bug Fixes
  • Fixed a devtools initialization issue where unmounting could occur before the component was fully mounted, improving stability during application startup and shutdown sequences.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1d387bbf-a16b-4f10-9ef1-e5ada9f30583

📥 Commits

Reviewing files that changed from the base of the PR and between 67b12ae and 9a0f75e.

📒 Files selected for processing (2)

• packages/vue-query-devtools/src/devtools.vue
• packages/vue-query-devtools/src/devtoolsPanel.vue

---

📝 Walkthrough

Walkthrough

Both Vue devtools components now track mount state with a boolean flag, ensuring devtools.unmount() is only called after devtools.mount() has completed, preventing errors during server-side rendering lifecycle cleanup.

Changes

Cohort / File(s)	Summary
Mount Guard Pattern packages/vue-query-devtools/src/devtools.vue, packages/vue-query-devtools/src/devtoolsPanel.vue	Added mounted boolean flag initialized to false, set to true after devtools.mount() in onMounted hook, and used to conditionally guard devtools.unmount() during onScopeDispose.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~7 minutes

Poem

🐰 A mounted flag now guards the way,
No premature unmounts shall stray!
The devtools wait their proper time,
Before farewell, they're in their prime. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description clearly explains the problem, fix, and affected files, but lacks the required PR template sections like checklist and release impact declaration.	Complete the PR template by adding the Checklist section with contributor confirmations and Release Impact section to indicate changeset status.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: introducing a mounted flag to guard unmount calls in SSR contexts.
Linked Issues check	✅ Passed	The changes directly address issue #10374 by introducing a mounted flag to prevent unmount calls before mount completes in SSR contexts.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the SSR crash in both devtools.vue and devtoolsPanel.vue as described in the linked issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}