[issue?] vue-query uses a problematic @vue/devtools-api version

[aervxa]

I feel this should be an issue, but this is not reproducible somehow??

Uncaught (in promise) SyntaxError: The requested module 'http://localhost:3000/_nuxt/@fs/home/<user>/Projects/lepse/node_modules/.pnpm/@vue+devtools-api@6.6.4/node_modules/@vue/devtools-api/lib/cjs/index.js' doesn't provide an export named: 'setupDevtoolsPlugin'

this happens when using pnpm, and there are two workarounds:

• pnpm install --shamefully-hoist
• exclude it from vite optimize deps
• install a newer version in ur package.json ?? (i did this, installed as -D)
• override tanstack/vue-query to use a newer version of @vue/devtools-api

A similar issue that happened before with the same @vue/devtools-api@6.6.x, but on vee-validate (logaretm/vee-validate#4863)
the fix was to simple update @vue/devtools-api to a newer version..?

output of pnpm --filter why @vue/devtools-api

dependencies:
@tanstack/vue-query 5.102.8
└── @vue/devtools-api 6.6.4
@tuyau/vue-query 1.1.0
└─┬ @tanstack/vue-query 5.102.8 peer
  └── @vue/devtools-api 6.6.4
nuxt 4.5.2
└─┬ vue-router 5.3.1
  └── @vue/devtools-api 8.2.1
vue-router 5.3.1
└── @vue/devtools-api 8.2.1
vue-sonner 2.0.9
└─┬ nuxt 4.5.2 peer
  └─┬ vue-router 5.3.1
    └── @vue/devtools-api 8.2.1

[DucMinhNe]

This issue happens because of how Vite / Nuxt and pnpm handle dual CommonJS / ESM packages in symlinked dependency trees.

Root Cause

1. @vue/devtools-api v6.6.4 is published with both CJS (lib/cjs/index.js) and ESM (lib/esm/index.js). Under pnpm's nested, isolated node_modules, Vite's dependency scanner or Nuxt's module resolution resolves the nested CommonJS entrypoint for @tanstack/vue-query instead of ESM. Because the CJS file assigns module.exports = { setupDevtoolsPlugin }, native ESM named imports (import { setupDevtoolsPlugin } from '@vue/devtools-api') fail at runtime with SyntaxError: The requested module ... does not provide an export named: 'setupDevtoolsPlugin'.
2. Notice your pnpm why tree: Nuxt 4 and vue-router are already using @vue/devtools-api@8.x (pure ESM / modern devtools), while @tanstack/vue-query still pulls in legacy 6.6.4. Having two disparate versions of the devtools bridge loaded simultaneously breaks Vite's pre-bundler deduplication.

---

Cleanest Fixes

1. Deduplicate via pnpm overrides (Recommended)

Force pnpm to hoist and unify @vue/devtools-api across your entire workspace so all packages share the modern ESM release:

// package.json
{
  "pnpm": {
    "overrides": {
      "@vue/devtools-api": "^7.0.0"
    }
  }
}

(Run pnpm install after adding this. Both @tanstack/vue-query and vue-router will resolve the unified ESM build.)

2. Nuxt / Vite configuration workaround

If you cannot use overrides, tell Vite to pre-bundle or transpile the dependency so its named exports are properly exposed:

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: ["@vue/devtools-api"],
    },
  },
  build: {
    transpile: ["@vue/devtools-api", "@tanstack/vue-query"],
  },
});

---

Upstream Fix

Long term, @tanstack/vue-query should update its dependency declaration to allow @vue/devtools-api: ^6.6.4 || ^7.0.0 || ^8.0.0 (or mark it as an optional peerDependency / dynamic import), identical to the fix implemented in vee-validate#4863.

[aervxa]

1. I can confirm the override works
2. didn't try that, ps. I would rather not do that much change for a workaround

I wonder why is there any reason to add an AI reply with little to no benifit regarding the size of the comment.