fix(dynamicImportVars): correct glob pattern for paths with parenthes…

…es (#17940) Co-authored-by: 翠 / green <green@sapphi.red>
vitejs · Sep 9, 2024 · 2a391a7 · 2a391a7
1 parent 2adc5aa
commit 2a391a7
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 5 deletions.
diff --git a/packages/vite/src/node/plugins/dynamicImportVars.ts b/packages/vite/src/node/plugins/dynamicImportVars.ts
@@ -19,7 +19,6 @@ import {
 } from '../utils'
 import type { Environment } from '../environment'
 import { usePerEnvironmentState } from '../environment'
-import { toAbsoluteGlob } from './importMetaGlob'
 import { hasViteIgnoreRE } from './importAnalysis'
 import { workerOrSharedWorkerRE } from './worker'
 
@@ -144,11 +143,13 @@ export async function transformDynamicImport(
   }
   const { globParams, rawPattern, userPattern } = dynamicImportPattern
   const params = globParams ? `, ${JSON.stringify(globParams)}` : ''
+  const dir = importer ? posix.dirname(importer) : root
+  const normalized =
+    rawPattern[0] === '/'
+      ? posix.join(root, rawPattern.slice(1))
+      : posix.join(dir, rawPattern)
 
-  let newRawPattern = posix.relative(
-    posix.dirname(importer),
-    await toAbsoluteGlob(rawPattern, root, importer, resolve),
-  )
+  let newRawPattern = posix.relative(posix.dirname(importer), normalized)
 
   if (!relativePathRE.test(newRawPattern)) {
     newRawPattern = `./${newRawPattern}`

diff --git a/playground/dynamic-import/(app)/main.js b/playground/dynamic-import/(app)/main.js
@@ -0,0 +1,3 @@
+export function hello() {
+  return 'dynamic-import-with-vars-contains-parenthesis'
+}
diff --git a/playground/dynamic-import/(app)/nest/index.js b/playground/dynamic-import/(app)/nest/index.js
@@ -0,0 +1,6 @@
+const base = 'main'
+import(`../${base}.js`).then((mod) => {
+  document.querySelector(
+    '.dynamic-import-with-vars-contains-parenthesis',
+  ).textContent = mod.hello()
+})
diff --git a/playground/dynamic-import/__tests__/dynamic-import.spec.ts b/playground/dynamic-import/__tests__/dynamic-import.spec.ts
@@ -160,6 +160,14 @@ test('should work with load ../ and contain itself directory', async () => {
   )
 })
 
+test('should work a load path that contains parentheses.', async () => {
+  await untilUpdated(
+    () => page.textContent('.dynamic-import-with-vars-contains-parenthesis'),
+    'dynamic-import-with-vars-contains-parenthesis',
+    true,
+  )
+})
+
 test.runIf(isBuild)(
   'should rollup warn when static and dynamic import a module in same chunk',
   async () => {

diff --git a/playground/dynamic-import/index.html b/playground/dynamic-import/index.html
@@ -34,6 +34,9 @@
 <p>dynamic-import-with-vars-worker</p>
 <div class="dynamic-import-with-vars-worker">todo</div>
 
+<p>dynamic-import-with-vars-contains-parenthesis</p>
+<div class="dynamic-import-with-vars-contains-parenthesis">todo</div>
+
 <div class="view"></div>
 
 <div class="dynamic-import-self"></div>
@@ -43,6 +46,7 @@
 <div class="dynamic-import-nested-self"></div>
 
 <script type="module" src="./nested/index.js"></script>
+<script type="module" src="./(app)/nest/index.js"></script>
 <style>
   p {
     color: #0088ff;