From 2a391a7df6e5b4a8d9e8313fba7ddf003df41e12 Mon Sep 17 00:00:00 2001
From: sunnylost <sunnylost@gmail.com>
Date: Mon, 9 Sep 2024 22:10:58 +0800
Subject: [PATCH] fix(dynamicImportVars): correct glob pattern for paths with
 parentheses (#17940)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 翠 / green <green@sapphi.red>
---
 packages/vite/src/node/plugins/dynamicImportVars.ts   | 11 ++++++-----
 playground/dynamic-import/(app)/main.js               |  3 +++
 playground/dynamic-import/(app)/nest/index.js         |  6 ++++++
 .../dynamic-import/__tests__/dynamic-import.spec.ts   |  8 ++++++++
 playground/dynamic-import/index.html                  |  4 ++++
 5 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 playground/dynamic-import/(app)/main.js
 create mode 100644 playground/dynamic-import/(app)/nest/index.js

diff --git a/packages/vite/src/node/plugins/dynamicImportVars.ts b/packages/vite/src/node/plugins/dynamicImportVars.ts
index e6dcb756b..145f6130a 100644
--- 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
new file mode 100644
index 000000000..48f83a961
--- /dev/null
+++ 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
new file mode 100644
index 000000000..f2e2ca17f
--- /dev/null
+++ 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
index b94b712de..a1a843a0b 100644
--- 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
index 81f2d8f8e..1289efc3e 100644
--- 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;