fix(scan): correctly resolve virtual modules (#5711)

vitejs · Nov 17, 2021 · 01f9b16 · 01f9b16
1 parent 9666446
commit 01f9b16
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 24 deletions.
diff --git a/packages/vite/src/node/optimizer/scan.ts b/packages/vite/src/node/optimizer/scan.ts
@@ -19,7 +19,8 @@ import {
   dataUrlRE,
   multilineCommentsRE,
   singlelineCommentsRE,
-  virtualModuleRE
+  virtualModuleRE,
+  virtualModulePrefix
 } from '../utils'
 import {
   createPluginContainer,
@@ -189,7 +190,7 @@ function esbuildScanPlugin(
   return {
     name: 'vite:dep-scan',
     setup(build) {
-      const moduleScripts: Record<string, OnLoadResult> = {}
+      const localScripts: Record<string, OnLoadResult> = {}
 
       // external urls
       build.onResolve({ filter: externalRE }, ({ path }) => ({
@@ -203,18 +204,18 @@ function esbuildScanPlugin(
         external: true
       }))
 
-      build.onResolve(
-        { filter: virtualModuleRE },
-        async ({ path, importer }) => {
-          return {
-            path: await resolve(
-              path.substring('virtual-module:'.length),
-              importer
-            ),
-            namespace: 'html'
-          }
+      // local scripts (`<script>` in Svelte and `<script setup>` in Vue)
+      build.onResolve({ filter: virtualModuleRE }, ({ path }) => {
+        return {
+          // strip prefix to get valid filesystem path so esbuild can resolve imports in the file
+          path: path.replace(virtualModulePrefix, ''),
+          namespace: 'local-script'
         }
-      )
+      })
+
+      build.onLoad({ filter: /.*/, namespace: 'local-script' }, ({ path }) => {
+        return localScripts[path]
+      })
 
       // html types: extract script contents -----------------------------------
       build.onResolve({ filter: htmlTypesRE }, async ({ path, importer }) => {
@@ -224,13 +225,6 @@ function esbuildScanPlugin(
         }
       })
 
-      build.onLoad(
-        { filter: virtualModuleRE, namespace: 'html' },
-        async ({ path }) => {
-          return moduleScripts[path]
-        }
-      )
-
       // extract scripts inside HTML-like files and treat it as a js module
       build.onLoad(
         { filter: htmlTypesRE, namespace: 'html' },
@@ -282,12 +276,11 @@ function esbuildScanPlugin(
                 (path.endsWith('.vue') && setupRE.test(raw)) ||
                 (path.endsWith('.svelte') && context !== 'module')
               ) {
-                const id = `virtual-module:${path}`
-                moduleScripts[id] = {
+                localScripts[path] = {
                   loader,
                   contents: content
                 }
-                js += `import '${id}';\n`
+                js += `import '${virtualModulePrefix}${path}';\n`
               } else {
                 js += content + '\n'
               }

diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
@@ -152,7 +152,8 @@ export const isExternalUrl = (url: string): boolean => externalRE.test(url)
 export const dataUrlRE = /^\s*data:/i
 export const isDataUrl = (url: string): boolean => dataUrlRE.test(url)
 
-export const virtualModuleRE = /virtual-module:.*/
+export const virtualModuleRE = /^virtual-module:.*/
+export const virtualModulePrefix = 'virtual-module:'
 
 const knownJsSrcRE = /\.((j|t)sx?|mjs|vue|marko|svelte|astro)($|\?)/
 export const isJSRequest = (url: string): boolean => {