fix(dynamicImportVars): correct glob pattern for paths with parentheses (#17940)

Co-authored-by: 翠 / green <green@sapphi.red>

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(
+  let newRawPattern = posix.relative(posix.dirname(importer), normalized)
-    posix.dirname(importer),
-    await toAbsoluteGlob(rawPattern, root, importer, resolve),
-  )
 
   if (!relativePathRE.test(newRawPattern)) {
     newRawPattern = `./${newRawPattern}`

playground/dynamic-import/(app)/main.js

@@ -0,0 +1,3 @@
+export function hello() {
+  return 'dynamic-import-with-vars-contains-parenthesis'
+}

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()
+})

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 () => {

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;