NathanWalker · Sep 30, 2026 · Sep 30, 2026 · Sep 30, 2026 · Sep 30, 2026
diff --git a/packages/vite/hmr/frameworks/vue/server/sfc-route-serve.ts b/packages/vite/hmr/frameworks/vue/server/sfc-route-serve.ts
@@ -57,6 +57,10 @@ export function registerSfcServeRoute(server: ViteDevServer, options: RegisterSf
 			}
 			if (pathStyle && pathStyle !== '/' && !pathParam) {
 				if (!pathStyle.startsWith('/')) pathStyle = '/' + pathStyle;
+				// URL.pathname stays percent-encoded; decode before the query is appended.
+				try {
+					pathStyle = decodeURI(pathStyle);
+				} catch {}
 				// Include endpoint query for variant-style requests (e.g. /ns/sfc/Comp.vue?vue&type=template)
 				pathParam = pathStyle + (urlObj.search || '');
 			}

diff --git a/packages/vite/hmr/frameworks/vue/server/websocket-sfc.spec.ts b/packages/vite/hmr/frameworks/vue/server/websocket-sfc.spec.ts
@@ -88,6 +88,17 @@ describe('registerSfcHandlers', () => {
 			expect(res.body).toContain('export { default } from "/ns/asm?path=%2Fsrc%2FApp.vue";');
 		});
 
+		it('decodes percent-encoded path-style specs (device-encoded bracketed files)', async () => {
+			const { sfc, transformRequest } = mount();
+			transformRequest.mockResolvedValue({ code: 'export default {}' });
+			const res = makeRes();
+			await sfc({ url: '/ns/sfc/src/pages/%5Bid%5D.vue' }, res, vi.fn());
+			expect(transformRequest).toHaveBeenCalledWith('/src/pages/[id].vue?vue');
+			expect(res.statusCode).toBe(200);
+			expect(res.body).toContain('path=/src/pages/[id].vue');
+			expect(res.body).toContain(`export * from "/ns/asm?path=${encodeURIComponent('/src/pages/[id].vue')}";`);
+		});
+
 		it('returns an empty module for style variants', async () => {
 			const { sfc, transformRequest } = mount();
 			transformRequest.mockResolvedValue({ code: '/* css */' });

diff --git a/packages/vite/hmr/server/websocket-ns-m-request.spec.ts b/packages/vite/hmr/server/websocket-ns-m-request.spec.ts
@@ -19,6 +19,42 @@ describe('createNsMRequestContext', () => {
 		expect(result.value.bootTaggedRequest).toBe(false);
 	});
 
+	it('decodes percent-encoded pathname specs (device-encoded bracketed files)', () => {
+		const encoded = createNsMRequestContext('/ns/m/packages/app/src/app/demo/%5Bid%5D.tsrx?import', '/workspace', '/src/');
+		const raw = createNsMRequestContext('/ns/m/packages/app/src/app/demo/[id].tsrx?import', '/workspace', '/src/');
+
+		expect(encoded.kind).toBe('context');
+		expect(raw.kind).toBe('context');
+		if (encoded.kind !== 'context' || raw.kind !== 'context') {
+			return;
+		}
+
+		expect(encoded.value.spec).toBe('/packages/app/src/app/demo/[id].tsrx');
+		expect(encoded.value.spec).toBe(raw.value.spec);
+	});
+
+	it('does not double-decode the already-decoded ?path= spec', () => {
+		const result = createNsMRequestContext('/ns/m/?path=/app/demo/%255Bid%255D.tsrx', '/workspace', '/src/');
+
+		expect(result.kind).toBe('context');
+		if (result.kind !== 'context') {
+			return;
+		}
+
+		expect(result.value.spec).toBe('/app/demo/%5Bid%5D.tsrx');
+	});
+
+	it('leaves encoded reserved characters encoded, matching Vite', () => {
+		const result = createNsMRequestContext('/ns/m/app/a%3Fb%23c%2Fd.ts', '/workspace', '/src/');
+
+		expect(result.kind).toBe('context');
+		if (result.kind !== 'context') {
+			return;
+		}
+
+		expect(result.value.spec).toBe('/app/a%3Fb%23c%2Fd.ts');
+	});
+
 	it('returns a response module for blocked build-time node_modules imports', () => {
 		const result = createNsMRequestContext('/ns/m/node_modules/vite/dist/index.js', '/workspace', '/src/');
 

diff --git a/packages/vite/hmr/server/websocket-ns-m-request.ts b/packages/vite/hmr/server/websocket-ns-m-request.ts
@@ -89,12 +89,14 @@ export function createNsMRequestContext(requestUrl: string, serverRoot: string,
 		let spec = urlObj.searchParams.get('path') || '';
 		let forcedVer = urlObj.searchParams.get('v');
 		let bootTaggedRequest = false;
+		let specFromPathname = false;
 
 		if (!spec) {
 			const base = '/ns/m';
 			const rest = urlObj.pathname.slice(base.length);
 			if (rest && rest !== '/') {
 				spec = rest;
+				specFromPathname = true;
 			}
 		}
 
@@ -115,6 +117,13 @@ export function createNsMRequestContext(requestUrl: string, serverRoot: string,
 		}
 
 		spec = spec.replace(/[?#].*$/, '');
+		// URL.pathname stays percent-encoded (URLSearchParams already decoded
+		// `path`). decodeURI matches Vite's transform middleware.
+		if (specFromPathname) {
+			try {
+				spec = decodeURI(spec);
+			} catch {}
+		}
 		const decorated = collapseLegacyNsMTags(spec, 'inbound-request-spec');
 		spec = decorated.cleanedSpec;
 		bootTaggedRequest = decorated.bootTaggedRequest;