fix: dynamic import vars ignored warning (#14006)

Author: patak-dev

packages/vite/src/node/plugins/dynamicImportVars.ts

@@ -17,6 +17,7 @@ import {
   transformStableResult,
 } from '../utils'
 import { toAbsoluteGlob } from './importMetaGlob'
+import { hasViteIgnoreRE } from './importAnalysis'
 
 export const dynamicImportHelperId = '\0vite/dynamic-import-helper'
 
@@ -206,6 +207,10 @@ export function dynamicImportVarsPlugin(config: ResolvedConfig): Plugin {
           continue
         }
 
+        if (hasViteIgnoreRE.test(source.slice(expStart, expEnd))) {
+          continue
+        }
+
         s ||= new MagicString(source)
         let result
         try {

packages/vite/src/node/plugins/importAnalysis.ts

@@ -76,7 +76,7 @@ const optimizedDepDynamicRE = /-[A-Z\d]{8}\.js/
 
 const hasImportInQueryParamsRE = /[?&]import=?\b/
 
-const hasViteIgnoreRE = /\/\*\s*@vite-ignore\s*\*\//
+export const hasViteIgnoreRE = /\/\*\s*@vite-ignore\s*\*\//
 
 const cleanUpRawUrlRE = /\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm
 const urlIsStringRE = /^(?:'.*'|".*"|`.*`)$/

packages/vite/src/node/plugins/workerImportMetaUrl.ts

@@ -19,8 +19,7 @@ import { WORKER_FILE_ID, workerFileToUrl } from './worker'
 import { fileToUrl } from './asset'
 import type { InternalResolveOptions } from './resolve'
 import { tryFsResolve } from './resolve'
-
-const ignoreFlagRE = /\/\*\s*@vite-ignore\s*\*\//
+import { hasViteIgnoreRE } from './importAnalysis'
 
 interface WorkerOptions {
   type?: WorkerType
@@ -78,7 +77,7 @@ function getWorkerType(raw: string, clean: string, i: number): WorkerType {
     .substring(commaIndex + 1, endIndex)
     .replace(/\}[\s\S]*,/g, '}') // strip trailing comma for parsing
 
-  const hasViteIgnore = ignoreFlagRE.test(workerOptString)
+  const hasViteIgnore = hasViteIgnoreRE.test(workerOptString)
   if (hasViteIgnore) {
     return 'ignore'
   }

playground/dynamic-import/__tests__/dynamic-import.spec.ts

@@ -69,6 +69,20 @@ test('should load dynamic import with vars', async () => {
   )
 })
 
+test('should load dynamic import with vars ignored', async () => {
+  await untilUpdated(
+    () => page.textContent('.dynamic-import-with-vars-ignored'),
+    'hello',
+    true,
+  )
+  // No warning should be logged as we are using @vite-ignore
+  expect(
+    serverLogs.some((log) =>
+      log.includes('"https" has been externalized for browser compatibility'),
+    ),
+  ).toBe(false)
+})
+
 test('should load dynamic import with vars multiline', async () => {
   await untilUpdated(
     () => page.textContent('.dynamic-import-with-vars-multiline'),

playground/dynamic-import/index.html

@@ -13,6 +13,9 @@
 <p>dynamic-import-with-vars</p>
 <div class="dynamic-import-with-vars">todo</div>
 
+<p>dynamic-import-with-vars-ignored</p>
+<div class="dynamic-import-with-vars-ignored">todo</div>
+
 <p>dynamic-import-with-vars-multiline</p>
 <div class="dynamic-import-with-vars-multiline">todo</div>
 

playground/dynamic-import/nested/index.js

@@ -84,6 +84,11 @@ import(`../alias/${base}.js`).then((mod) => {
   text('.dynamic-import-with-vars', mod.hello())
 })
 
+import(/*@vite-ignore*/ `https://localhost`).catch((mod) => {
+  console.log(mod)
+  text('.dynamic-import-with-vars-ignored', 'hello')
+})
+
 // prettier-ignore
 import(
   /* this messes with */