fix(analysis): warnings for dynamic imports that use static template literals (#14458)

Co-authored-by: 翠 / green <[email protected]>

Author: 2 people

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

@@ -82,6 +82,8 @@ export const hasViteIgnoreRE = /\/\*\s*@vite-ignore\s*\*\//
 const cleanUpRawUrlRE = /\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm
 const urlIsStringRE = /^(?:'.*'|".*"|`.*`)$/
 
+const templateLiteralRE = /^\s*`(.*)`\s*$/
+
 interface UrlPosition {
   url: string
   start: number
@@ -426,12 +428,13 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
             ss: expStart,
             se: expEnd,
             d: dynamicIndex,
-            // #2083 User may use escape path,
-            // so use imports[index].n to get the unescaped string
-            n: specifier,
             a: assertIndex,
           } = importSpecifier
 
+          // #2083 User may use escape path,
+          // so use imports[index].n to get the unescaped string
+          let specifier = importSpecifier.n
+
           const rawUrl = source.slice(start, end)
 
           // check import.meta usage
@@ -469,6 +472,14 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
               hasEnv = true
             }
             return
+          } else if (templateLiteralRE.test(rawUrl)) {
+            // If the import has backticks but isn't transformed as a glob import
+            // (as there's nothing to glob), check if it's simply a plain string.
+            // If so, we can replace the specifier as a plain string to prevent
+            // an incorrect "cannot be analyzed" warning.
+            if (!(rawUrl.includes('${') && rawUrl.includes('}'))) {
+              specifier = rawUrl.replace(templateLiteralRE, '$1')
+            }
           }
 
           const isDynamicImport = dynamicIndex > -1

playground/dynamic-import/index.html

@@ -35,6 +35,8 @@
 
 <div class="dynamic-import-self"></div>
 
+<div class="dynamic-import-static"></div>
+
 <div class="dynamic-import-nested-self"></div>
 
 <script type="module" src="./nested/index.js"></script>

playground/dynamic-import/nested/index.js

@@ -131,4 +131,8 @@ import(`../nested/nested/${base}.js`).then((mod) => {
   text('.dynamic-import-nested-self', mod.self)
 })
 
+import(`../nested/static.js`).then((mod) => {
+  text('.dynamic-import-static', mod.self)
+})
+
 console.log('index.js')

playground/dynamic-import/nested/static.js

@@ -0,0 +1 @@
+export const self = 'dynamic-import-static'