fix: resolve dynamicly imported modules to be the same as statically (#…

…911)

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

examples/vue/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "esnext",
+    "module": "esnext",
     "moduleResolution": "node",
   }
 }

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)
   }
 
   /**

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