fix: injectQuery check with double slash in the url (#14910)

vitejs · Nov 9, 2023 · 84c5ff6 · 84c5ff6
1 parent 7c240a0
commit 84c5ff6
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts
@@ -6,6 +6,7 @@ import MagicString from 'magic-string'
 import type { ExportSpecifier, ImportSpecifier } from 'es-module-lexer'
 import { init, parse as parseImports } from 'es-module-lexer'
 import { parse as parseJS } from 'acorn'
+import { stripLiteral } from 'strip-literal'
 import type { Node } from 'estree'
 import { findStaticImports, parseStaticImport } from 'mlly'
 import { makeLegalIdentifier } from '@rollup/pluginutils'
@@ -74,7 +75,13 @@ const hasImportInQueryParamsRE = /[?&]import=?\b/
 
 export const hasViteIgnoreRE = /\/\*\s*@vite-ignore\s*\*\//
 
-const cleanUpRawUrlRE = /\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm
+const trimWhitespaceRE = /^(\s*)(\S|\S[\s\S]*\S)\s*$/
+const trimWhitespaceAndComments = (code: string) => {
+  const cleanedCode = stripLiteral(code)
+  const match = trimWhitespaceRE.exec(cleanedCode)
+  return match ? code.slice(match[1].length, match[2].length) : code
+}
+
 const urlIsStringRE = /^(?:'.*'|".*"|`.*`)$/
 
 const templateLiteralRE = /^\s*`(.*)`\s*$/
@@ -650,16 +657,17 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
             }
 
             if (!ssr) {
-              const url = rawUrl.replace(cleanUpRawUrlRE, '').trim()
+              const url = trimWhitespaceAndComments(rawUrl)
               if (
                 !urlIsStringRE.test(url) ||
                 isExplicitImportRequired(url.slice(1, -1))
               ) {
                 needQueryInjectHelper = true
+                // Use rawUrl to avoid removing comments like @vite-ignore
                 str().overwrite(
                   start,
                   end,
-                  `__vite__injectQuery(${url}, 'import')`,
+                  `__vite__injectQuery(${rawUrl}, 'import')`,
                   { contentOnly: true },
                 )
               }

diff --git a/playground/dynamic-import/__tests__/dynamic-import.spec.ts b/playground/dynamic-import/__tests__/dynamic-import.spec.ts
@@ -83,6 +83,14 @@ test('should load dynamic import with vars ignored', async () => {
   ).toBe(false)
 })
 
+test('should load dynamic import with double slash ignored', async () => {
+  await untilUpdated(
+    () => page.textContent('.dynamic-import-with-double-slash-ignored'),
+    'hello',
+    true,
+  )
+})
+
 test('should load dynamic import with vars multiline', async () => {
   await untilUpdated(
     () => page.textContent('.dynamic-import-with-vars-multiline'),

diff --git a/playground/dynamic-import/index.html b/playground/dynamic-import/index.html
@@ -16,6 +16,9 @@
 <p>dynamic-import-with-vars-ignored</p>
 <div class="dynamic-import-with-vars-ignored">todo</div>
 
+<p>dynamic-import-with-double-slash-ignored</p>
+<div class="dynamic-import-with-double-slash-ignored">todo</div>
+
 <p>dynamic-import-with-vars-multiline</p>
 <div class="dynamic-import-with-vars-multiline">todo</div>
 

diff --git a/playground/dynamic-import/nested/index.js b/playground/dynamic-import/nested/index.js
@@ -89,6 +89,11 @@ import(/*@vite-ignore*/ `https://localhost`).catch((mod) => {
   text('.dynamic-import-with-vars-ignored', 'hello')
 })
 
+import(/*@vite-ignore*/ `https://localhost//${'test'}`).catch((mod) => {
+  console.log(mod)
+  text('.dynamic-import-with-double-slash-ignored', 'hello')
+})
+
 // prettier-ignore
 import(
   /* this messes with */