fix: virtual svg module (vitejs#20144)

Author: patak-dev

packages/vite/src/node/server/middlewares/transform.ts

@@ -213,6 +213,7 @@ export function transformMiddleware(
         '',
       )
       if (
+        !url.startsWith('/@id/\0') &&
         deniedServingAccessForTransform(
           urlWithoutTrailingQuerySeparators,
           server,
@@ -264,7 +265,10 @@ export function transformMiddleware(
         const result = await transformRequest(environment, url, {
           html: req.headers.accept?.includes('text/html'),
           allowId(id) {
-            return !deniedServingAccessForTransform(id, server, res, next)
+            return (
+              id.startsWith('\0') ||
+              !deniedServingAccessForTransform(id, server, res, next)
+            )
           },
         })
         if (result) {

playground/fs-serve/__tests__/fs-serve.spec.ts

@@ -38,6 +38,10 @@ describe.runIf(isServe)('main', () => {
     expect(await page.textContent('.named')).toBe(testJSON.msg)
   })
 
+  test('virtual svg module', async () => {
+    expect(await page.textContent('.virtual-svg')).toMatch('<svg')
+  })
+
   test('safe fetch', async () => {
     expect(await page.textContent('.safe-fetch')).toMatch('KEY=safe')
     expect(await page.textContent('.safe-fetch-status')).toBe('200')

playground/fs-serve/root/src/index.html

@@ -61,11 +61,17 @@ <h2>Denied</h2>
 <pre class="unsafe-dotEnV-casing"></pre>
 <pre class="unsafe-dotenv-query-dot-svg-wasm-init"></pre>
 
+<d2>Virtual SVG module</d2>
+<pre class="virtual-svg"></pre>
+
 <script type="module">
   import '../../entry'
   import json, { msg } from '../../safe.json'
   import './code.js'
 
+  // Check virtual svg module still works
+  import fooSvg from 'virtual:foo.svg'
+
   function joinUrlSegments(a, b) {
     if (!a || !b) {
       return a || b || ''
@@ -81,6 +87,7 @@ <h2>Denied</h2>
 
   text('.full', JSON.stringify(json))
   text('.named', msg)
+  text('.virtual-svg', fooSvg)
 
   const base = typeof BASE !== 'undefined' ? BASE : ''
 

playground/fs-serve/root/svgVirtualModulePlugin.ts

@@ -0,0 +1,20 @@
+import type { Plugin } from 'vite'
+const svgVirtualModuleId = 'virtual:foo.svg'
+const resolvedSvgVirtualModuleId = '\0' + svgVirtualModuleId
+
+export default function svgVirtualModulePlugin(): Plugin {
+  return {
+    name: 'svg-virtual-module',
+    resolveId(id) {
+      if (id === svgVirtualModuleId) {
+        return resolvedSvgVirtualModuleId
+      }
+    },
+    async load(id, _options) {
+      if (id === resolvedSvgVirtualModuleId) {
+        return `export default '<svg><rect width="100" height="100"></svg>'`
+      }
+    },
+    enforce: 'pre',
+  }
+}

playground/fs-serve/root/vite.config-base.js

@@ -1,5 +1,6 @@
 import path from 'node:path'
 import { defineConfig } from 'vite'
+import svgVirtualModulePlugin from './svgVirtualModulePlugin'
 
 const BASE = '/base/'
 
@@ -33,4 +34,5 @@ export default defineConfig({
     ROOT: JSON.stringify(path.dirname(__dirname).replace(/\\/g, '/')),
     BASE: JSON.stringify(BASE),
   },
+  plugins: [svgVirtualModulePlugin()],
 })

playground/fs-serve/root/vite.config-deny.js

@@ -1,5 +1,6 @@
 import path from 'node:path'
 import { defineConfig } from 'vite'
+import svgVirtualModulePlugin from './svgVirtualModulePlugin'
 
 export default defineConfig({
   build: {
@@ -19,4 +20,5 @@ export default defineConfig({
   define: {
     ROOT: JSON.stringify(path.dirname(__dirname).replace(/\\/g, '/')),
   },
+  plugins: [svgVirtualModulePlugin()],
 })

playground/fs-serve/root/vite.config.js

@@ -1,5 +1,6 @@
 import path from 'node:path'
 import { defineConfig } from 'vite'
+import svgVirtualModulePlugin from './svgVirtualModulePlugin'
 
 export default defineConfig({
   build: {
@@ -29,4 +30,5 @@ export default defineConfig({
   define: {
     ROOT: JSON.stringify(path.dirname(__dirname).replace(/\\/g, '/')),
   },
+  plugins: [svgVirtualModulePlugin()],
 })