fix: dynamic import path contain ../ and its own directory

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

@@ -14,6 +14,7 @@ import {
   requestQuerySplitRE,
   transformStableResult
 } from '../utils'
+import { toAbsoluteGlob } from './importMetaGlob'
 
 export const dynamicImportHelperId = '/@vite/dynamic-import-helper'
 
@@ -105,6 +106,7 @@ export async function transformDynamicImport(
   const params = globParams
     ? `, ${JSON.stringify({ ...globParams, import: '*' })}`
     : ''
+
   const exp = `(import.meta.glob(${JSON.stringify(userPattern)}${params}))`
 
   return {
@@ -198,11 +200,22 @@ export function dynamicImportVarsPlugin(config: ResolvedConfig): Plugin {
 
         const { rawPattern, glob } = result
 
+        let newPattern = posix.relative(
+          posix.dirname(importer),
+          await toAbsoluteGlob(rawPattern, config.root, importer, (im) =>
+            this.resolve(im, importer).then((i) => i?.id || im)
+          )
+        )
+
+        if (!/^\.{1,2}\//.test(newPattern)) {
+          newPattern = `./${newPattern}`
+        }
+
         needDynamicImportHelper = true
         s.overwrite(
           expStart,
           expEnd,
-          `__variableDynamicImportRuntimeHelper(${glob}, \`${rawPattern}\`)`
+          `__variableDynamicImportRuntimeHelper(${glob}, \`${newPattern}\`)`
         )
       }
 

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

@@ -96,3 +96,19 @@ test('should load dynamic import with css in package', async () => {
   await page.click('.pkg-css')
   await untilUpdated(() => getColor('.pkg-css'), 'blue', true)
 })
+
+test('should work with load ../ and itself directory', async () => {
+  await untilUpdated(
+    () => page.textContent('.dynamic-import-self'),
+    'dynamic-import-self-content',
+    true
+  )
+})
+
+test('should work with load ../ and contain itself directory', async () => {
+  await untilUpdated(
+    () => page.textContent('.dynamic-import-nested-self'),
+    'dynamic-import-nested-self-content',
+    true
+  )
+})

playground/dynamic-import/index.html

@@ -21,6 +21,10 @@
 
 <div class="view"></div>
 
+<div class="dynamic-import-self"></div>
+
+<div class="dynamic-import-nested-self"></div>
+
 <script type="module" src="./nested/index.js"></script>
 <style>
   p {

playground/dynamic-import/nested/index.js

@@ -102,4 +102,13 @@ import(`@/${base}.js`).then((mod) => {
   text('.dynamic-import-with-vars-alias', mod.hi())
 })
 
+base = 'self'
+import(`../nested/${base}.js`).then((mod) => {
+  text('.dynamic-import-self', mod.self)
+})
+
+import(`../nested/nested/${base}.js`).then((mod) => {
+  text('.dynamic-import-nested-self', mod.self)
+})
+
 console.log('index.js')

playground/dynamic-import/nested/nested/self.js

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

playground/dynamic-import/nested/self.js

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