fix: set inferred moduleType for virtual modules (#470)

Author: sapphi-red

packages/vite/src/node/server/transformRequest.ts

@@ -303,11 +303,6 @@ async function loadAndTransform(
           timestamp: true,
         })
       }
-
-      const guessedModuleType = getModuleTypeFromId(id)
-      if (guessedModuleType && guessedModuleType !== 'js') {
-        moduleType = guessedModuleType
-      }
     }
   } else {
     debugLoad?.(`${timeFrom(loadStart)} [plugin] ${prettyUrl}`)
@@ -340,6 +335,12 @@ async function loadAndTransform(
     err.code = isPublicFile ? ERR_LOAD_PUBLIC_URL : ERR_LOAD_URL
     throw err
   }
+  if (moduleType === undefined) {
+    const guessedModuleType = getModuleTypeFromId(id)
+    if (guessedModuleType && guessedModuleType !== 'js') {
+      moduleType = guessedModuleType
+    }
+  }
 
   if (environment._closing && environment.config.dev.recoverable)
     throwClosedServerError()

playground/transform-plugin/__tests__/transform-plugin.spec.ts

@@ -5,6 +5,8 @@ import { page } from '~utils'
 test('module type should be supported', async () => {
   expect(await page.textContent('#module-type-json-pre')).toBe('json')
   expect(await page.textContent('#module-type-json-post')).toBe('js')
+  expect(await page.textContent('#module-type-json-virtual-pre')).toBe('json')
+  expect(await page.textContent('#module-type-json-virtual-post')).toBe('js')
 })
 
 tests()

playground/transform-plugin/index.html

@@ -6,5 +6,7 @@ <h2>addWatchFile</h2>
 <h2>Module Type</h2>
 <div id="module-type-json-pre"></div>
 <div id="module-type-json-post"></div>
+<div id="module-type-json-virtual-pre"></div>
+<div id="module-type-json-virtual-post"></div>
 
 <script type="module" src="./index.js"></script>

playground/transform-plugin/index.js

@@ -1,3 +1,4 @@
+import barJson from 'virtual:/bar.json'
 import fooJson from './foo.json'
 
 // 'TRANSFORM_COUNT' is injected by the transform plugin
@@ -7,3 +8,8 @@ document.getElementById('module-type-json-pre').innerHTML =
   fooJson.moduleTypePre
 document.getElementById('module-type-json-post').innerHTML =
   fooJson.moduleTypePost
+
+document.getElementById('module-type-json-virtual-pre').innerHTML =
+  barJson.moduleTypePre
+document.getElementById('module-type-json-virtual-post').innerHTML =
+  barJson.moduleTypePost

playground/transform-plugin/vite.config.js

@@ -27,21 +27,37 @@ const transformPlugin = {
   },
 }
 
-const moduleTypePlugins = /** @type {const} */ (['pre', 'post']).map(
-  (enforce) => ({
+const moduleTypePlugins = [
+  /** @type {const} */ ...['pre', 'post'].map((enforce) => ({
     name: `module-type-${enforce}`,
     enforce,
     transform(code, id, opts) {
-      if (id.endsWith('/foo.json')) {
+      if (id.endsWith('/foo.json') || id.endsWith('\0/bar.json')) {
         code = code.replace(
           `MODULE_TYPE_${enforce.toUpperCase()}`,
           opts.moduleType,
         )
         return code
       }
     },
-  }),
-)
+  })),
+  {
+    name: `module-type-load`,
+    resolveId(id) {
+      if (id === 'virtual:/bar.json') {
+        return '\0/bar.json'
+      }
+    },
+    load(id) {
+      if (id.endsWith('\0/bar.json')) {
+        return JSON.stringify({
+          moduleTypePre: 'MODULE_TYPE_PRE',
+          moduleTypePost: 'MODULE_TYPE_POST',
+        })
+      }
+    },
+  },
+]
 
 export default defineConfig({
   plugins: [transformPlugin, moduleTypePlugins],