From 094d23ebffe579cd2fbd6c186df09c7e43703be4 Mon Sep 17 00:00:00 2001
From: Vladimir <sheremet.va@icloud.com>
Date: Wed, 9 Mar 2022 10:21:28 +0300
Subject: [PATCH] fix: resolve dynamicly imported modules to be the same as
 statically (#911)

---
 examples/vue/test/imports.test.ts | 18 ++++++++++++++++++
 examples/vue/tsconfig.json        |  1 +
 packages/vite-node/src/client.ts  |  8 ++++----
 test/core/test/imports.test.ts    | 18 +++++++++---------
 4 files changed, 32 insertions(+), 13 deletions(-)
 create mode 100644 examples/vue/test/imports.test.ts

diff --git a/examples/vue/test/imports.test.ts b/examples/vue/test/imports.test.ts
new file mode 100644
index 000000000000..86d880b73135
--- /dev/null
+++ b/examples/vue/test/imports.test.ts
@@ -0,0 +1,18 @@
+describe('import vue components', () => {
+  test('normal imports as expected', async() => {
+    const cmp = await import('../components/Hello.vue')
+    expect(cmp).toBeDefined()
+  })
+
+  test('template string imports as expected', async() => {
+    // eslint-disable-next-line quotes
+    const cmp = await import(`../components/Hello.vue`)
+    expect(cmp).toBeDefined()
+  })
+
+  test('dynamic imports as expected', async() => {
+    const name = 'Hello'
+    const cmp = await import(`../components/${name}.vue`)
+    expect(cmp).toBeDefined()
+  })
+})
diff --git a/examples/vue/tsconfig.json b/examples/vue/tsconfig.json
index e6cbbed7d56b..c627a629ae38 100644
--- a/examples/vue/tsconfig.json
+++ b/examples/vue/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "esnext",
+    "module": "esnext",
     "moduleResolution": "node",
   }
 }
diff --git a/packages/vite-node/src/client.ts b/packages/vite-node/src/client.ts
index 5274c8d54094..7dc5e51c0f8c 100644
--- a/packages/vite-node/src/client.ts
+++ b/packages/vite-node/src/client.ts
@@ -1,7 +1,7 @@
 import { createRequire } from 'module'
 import { fileURLToPath, pathToFileURL } from 'url'
 import vm from 'vm'
-import { dirname, isAbsolute, resolve } from 'pathe'
+import { dirname, extname, isAbsolute, resolve } from 'pathe'
 import { isNodeBuiltin } from 'mlly'
 import { isPrimitive, normalizeId, slash, toFilePath } from './utils'
 import type { ModuleCache, ViteNodeRunnerOptions } from './types'
@@ -57,7 +57,7 @@ export class ViteNodeRunner {
       // and wasn't transformed by Vite
       if (this.shouldResolveId(dep)) {
         const resolvedDep = await this.options.resolveId(dep, id)
-        dep = resolvedDep?.id || dep
+        dep = resolvedDep?.id?.replace(this.root, '') || dep
       }
       if (callstack.includes(dep)) {
         if (!this.moduleCache.get(dep)?.exports)
@@ -141,10 +141,10 @@ export class ViteNodeRunner {
   }
 
   shouldResolveId(dep: string) {
-    if (isNodeBuiltin(dep))
+    if (isNodeBuiltin(dep) || dep in (this.options.requestStubs || DEFAULT_REQUEST_STUBS))
       return false
 
-    return !isAbsolute(dep)
+    return !isAbsolute(dep) || !extname(dep)
   }
 
   /**
diff --git a/test/core/test/imports.test.ts b/test/core/test/imports.test.ts
index 58f6c6e552c0..17c140547396 100644
--- a/test/core/test/imports.test.ts
+++ b/test/core/test/imports.test.ts
@@ -1,30 +1,30 @@
 import { expect, test } from 'vitest'
 
 test('dynamic relative import works', async() => {
-  const { timeout } = await import('./../src/timeout')
+  const stringTimeoutMod = await import('./../src/timeout')
 
   const timeoutPath = './../src/timeout'
-  const { timeout: dynamicTimeout } = await import(timeoutPath)
+  const variableTimeoutMod = await import(timeoutPath)
 
-  expect(timeout).toBe(dynamicTimeout)
+  expect(stringTimeoutMod).toBe(variableTimeoutMod)
 })
 
 test('dynamic aliased import works', async() => {
-  const { timeout } = await import('./../src/timeout')
+  const stringTimeoutMod = await import('./../src/timeout')
 
   const timeoutPath = '@/timeout'
-  const { timeout: dynamicTimeout } = await import(timeoutPath)
+  const variableTimeoutMod = await import(timeoutPath)
 
-  expect(timeout).toBe(dynamicTimeout)
+  expect(stringTimeoutMod).toBe(variableTimeoutMod)
 })
 
 test('dynamic absolute import works', async() => {
-  const { timeout } = await import('./../src/timeout')
+  const stringTimeoutMod = await import('./../src/timeout')
 
   const timeoutPath = '/src/timeout'
-  const { timeout: dynamicTimeout } = await import(timeoutPath)
+  const variableTimeoutMod = await import(timeoutPath)
 
-  expect(timeout).toBe(dynamicTimeout)
+  expect(stringTimeoutMod).toBe(variableTimeoutMod)
 })
 
 test('data with dynamic import works', async() => {