Skip to content

Commit b2665eb

Browse files
antfuantfu
committed
fix(devtools): don't scope dock plugin with { server: false }
Under Nuxt 5 / Vite 8 (and Nuxt 4 with `experimental.viteEnvironmentApi`), `addVitePlugin(plugin, { server: false })` makes `@nuxt/kit` wrap the plugin in an `applyToEnvironment` shell. That wrapper plugin lacks a `devtools` property, so `@vitejs/devtools`'s plugin filter (`viteConfig.plugins.filter(p => "devtools" in p)`) silently drops it and the Nuxt DevTools dock entry never appears in the Vite DevTools dock bar. The original client-vs-server RPC race that motivated the scoping in b5f9f8a is already prevented by the `if (devtoolsKitCtx) return` guard inside `connectDevToolsKit`, so the plugin-level scoping is unnecessary. Adds a `spa` playground (`ssr: false` + `experimental.viteEnvironmentApi: true`) to the e2e matrix as a hard regression test: under this combo on Nuxt 4 the dock-missing bug reproduces identically to the Nuxt 5 SPA scenario the report was filed against, so the existing `iframe.spec.ts` fixture turns RED when `{ server: false }` is reintroduced.
1 parent a58971a commit b2665eb

10 files changed

Lines changed: 86 additions & 3 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,4 @@ packages/devtools/client/public/discovery/index.html
6969
.context
7070
.claude
7171
.ghfs
72+
.omo

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"test:e2e:all": "pnpm test:e2e:prebuild && playwright test --config tests/e2e/playwright.config.ts",
1919
"test:e2e:dev": "PW_PROJECT='*:dev' playwright test --config tests/e2e/playwright.config.ts",
2020
"test:e2e:built": "pnpm test:e2e:prebuild && PW_PROJECT='*:built' playwright test --config tests/e2e/playwright.config.ts",
21-
"test:e2e:prebuild": "pnpm -C playgrounds/empty exec nuxt build && pnpm -C playgrounds/tab-pinia exec nuxt build && pnpm -C playgrounds/tab-seo exec nuxt build",
21+
"test:e2e:prebuild": "pnpm -C playgrounds/empty exec nuxt build && pnpm -C playgrounds/spa exec nuxt build && pnpm -C playgrounds/tab-pinia exec nuxt build && pnpm -C playgrounds/tab-seo exec nuxt build",
2222
"test:e2e:ui": "playwright test --config tests/e2e/playwright.config.ts --ui",
2323
"docs": "nuxi dev docs",
2424
"docs:build": "CI=true nuxi generate docs",

‎packages/devtools/src/module-main.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,11 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
8080
// Deferred: will be set when Vite DevTools plugin setup runs
8181
let connectDevToolsKit: ((ctx: any) => void) | undefined
8282

83+
// Do NOT pass `{ server: false }` here: under Nuxt 5 / Vite 8 the kit wraps
84+
// the plugin in an `applyToEnvironment` shell that strips the `devtools`
85+
// property, so `@vitejs/devtools` silently drops the dock entry. The
86+
// original client-vs-server RPC race is already handled by the guard inside
87+
// `connectDevToolsKit` (`if (devtoolsKitCtx) return`).
8388
addVitePlugin(defineViteDevToolsPlugin({
8489
name: 'nuxt:devtools',
8590
devtools: {
@@ -96,7 +101,7 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
96101
connectDevToolsKit?.(ctx)
97102
},
98103
},
99-
}), { server: false })
104+
}))
100105
addPlugin({
101106
src: join(runtimeDir, 'plugins/vite-devtools.client'),
102107
mode: 'client',

‎playgrounds/spa/.npmrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
shamefully-hoist=true
2+
strict-peer-dependencies=false

‎playgrounds/spa/app.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script setup lang="ts">
2+
function handleClick() {
3+
// eslint-disable-next-line no-console
4+
console.log('clicked')
5+
}
6+
</script>
7+
8+
<template>
9+
<h1>Hello (SPA mode)</h1>
10+
<p>
11+
This playground runs with <code>ssr: false</code>. The Nuxt DevTools dock
12+
entry should still appear in Vite DevTools.
13+
</p>
14+
<button @click="handleClick">
15+
Click me
16+
</button>
17+
</template>
18+
19+
<style>
20+
@media (prefers-color-scheme: dark) {
21+
html {
22+
color-scheme: dark;
23+
}
24+
}
25+
</style>

‎playgrounds/spa/nuxt.config.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// https://nuxt.com/docs/api/configuration/nuxt-config
2+
const devtoolsModule = process.env.NUXT_DEVTOOLS_LOCAL ? '../../local' : '@nuxt/devtools'
3+
4+
// Regression playground for the dock-missing bug. With `ssr: false` AND
5+
// `experimental.viteEnvironmentApi: true`, `@nuxt/kit`'s `addVitePlugin`
6+
// takes the `applyToEnvironment` wrapper branch (`config.environments` is
7+
// always populated). The wrapper plugin object lacks a `devtools` property,
8+
// so `@vitejs/devtools`'s `"devtools" in plugin` filter silently drops it
9+
// and the Nuxt DevTools dock entry never registers. This mirrors the Nuxt 5
10+
// vite-builder code path the bug was originally reported against.
11+
export default defineNuxtConfig({
12+
modules: [
13+
devtoolsModule,
14+
],
15+
16+
ssr: false,
17+
18+
experimental: {
19+
viteEnvironmentApi: true,
20+
},
21+
22+
compatibilityDate: '2024-09-19',
23+
})

‎playgrounds/spa/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "spa",
3+
"version": "4.0.0-alpha.6",
4+
"private": true,
5+
"main": "nuxt.config.ts",
6+
"files": [
7+
"app.vue",
8+
"components",
9+
"nuxt.config.ts",
10+
"pages",
11+
"public"
12+
],
13+
"scripts": {
14+
"play:build": "nuxt build",
15+
"play:dev": "nuxt dev",
16+
"play:generate": "nuxt generate",
17+
"play:preview": "nuxt preview"
18+
},
19+
"devDependencies": {
20+
"@types/node": "catalog:types",
21+
"nuxt": "catalog:buildtools"
22+
}
23+
}

‎playgrounds/spa/public/empty.txt‎

Whitespace-only changes.

‎playgrounds/spa/tsconfig.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
// https://nuxt.com/docs/guide/concepts/typescript
3+
"extends": "./.nuxt/tsconfig.json"
4+
}

‎tests/e2e/playwright.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { matchesProjectFilter } from './shared/glob'
55

66
const REPO_ROOT = fileURLToPath(new URL('../..', import.meta.url))
77

8-
const PLAYGROUNDS = ['empty', 'tab-pinia', 'tab-seo'] as const
8+
const PLAYGROUNDS = ['empty', 'spa', 'tab-pinia', 'tab-seo'] as const
99
const MODES = ['dev', 'built'] as const
1010

1111
type Mode = typeof MODES[number]

0 commit comments

Comments
 (0)