fix(dev): resolve correct outside relative imports from aliased dir (v…

…itejs#407)

fix vitejs#396

playground/TestAlias.vue

@@ -3,18 +3,21 @@
   <p class="alias">{{ msg }}</p>
   <p class="dir-alias">{{ dirMsg }}</p>
   <p class="dir-alias-index">{{ dirIndexMsg }}</p>
+  <p class="dir-alias-import-outside">{{ importOutsideMsg }}</p>
 </template>
 
 <script>
 import { msg } from 'alias'
 import { msg as dirMsg } from '/@alias/named'
 import { msg as dirIndexMsg } from '/@alias/'
+import { msg as importOutsideMsg } from '/@alias/importOutside'
 
 export default {
   data: () => ({
     msg,
     dirMsg,
-    dirIndexMsg
+    dirIndexMsg,
+    importOutsideMsg
   })
 }
 </script>

playground/aliased-dir-import.js

@@ -0,0 +1 @@
+export const msg = 'directory aliased internal import outside works'

playground/aliased-dir/importOutside.js

@@ -0,0 +1 @@
+export { msg } from '../aliased-dir-import'

src/node/resolver.ts

@@ -30,6 +30,10 @@ export interface InternalResolver {
   fileToRequest(filePath: string): string
   normalizePublicPath(publicPath: string): string
   alias(id: string): string | undefined
+  resolveRelativeRequest(
+    publicPath: string,
+    relativePublicPath: string
+  ): { pathname: string; query: string }
 }
 
 export const supportedExts = ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
@@ -118,6 +122,7 @@ export function createResolver(
 ): InternalResolver {
   resolvers = [...resolvers]
   const literalAlias: Record<string, string> = {}
+  const literalDirAlias: Record<string, string> = {}
 
   const resolveAlias = (alias: Record<string, string>) => {
     for (const key in alias) {
@@ -143,6 +148,7 @@ export function createResolver(
             }
           }
         })
+        literalDirAlias[key] = target
       } else {
         literalAlias[key] = target
       }
@@ -281,6 +287,25 @@ export function createResolver(
           return aliased
         }
       }
+    },
+
+    resolveRelativeRequest(publicPath: string, relativePublicPath: string) {
+      let dirname = path.dirname(publicPath)
+      for (const alias in literalDirAlias) {
+        if (publicPath.startsWith(alias)) {
+          dirname = path.join('/', path.relative(root, literalDirAlias[alias]))
+          break
+        }
+      }
+
+      const resolved = slash(path.posix.resolve(dirname, relativePublicPath))
+      const queryMatch = relativePublicPath.match(queryRE)
+      return {
+        // path resovle strips ending / which should be preserved
+        pathname:
+          cleanUrl(resolved) + (relativePublicPath.endsWith('/') ? '/' : ''),
+        query: queryMatch ? queryMatch[0] : ''
+      }
     }
   }
 

src/node/server/serverPluginModuleRewrite.ts

@@ -22,12 +22,7 @@ import {
   hmrDirtyFilesMap,
   latestVersionsMap
 } from './serverPluginHmr'
-import {
-  readBody,
-  cleanUrl,
-  isExternalUrl,
-  resolveRelativeRequest
-} from '../utils'
+import { readBody, cleanUrl, isExternalUrl } from '../utils'
 import chalk from 'chalk'
 import { isCSSRequest } from '../utils/cssUtils'
 
@@ -252,7 +247,7 @@ export const resolveImport = (
   } else {
     // 1. relative to absolute
     //    ./foo -> /some/path/foo
-    let { pathname, query } = resolveRelativeRequest(importer, id)
+    let { pathname, query } = resolver.resolveRelativeRequest(importer, id)
 
     // 2. resolve dir index and extensions.
     pathname = resolver.normalizePublicPath(pathname)

src/node/utils/pathUtils.ts

@@ -1,4 +1,3 @@
-import path from 'path'
 import slash from 'slash'
 import qs, { ParsedUrlQuery } from 'querystring'
 import resolve from 'resolve'
@@ -19,16 +18,6 @@ export const hashRE = /#.*$/
 export const cleanUrl = (url: string) =>
   url.replace(hashRE, '').replace(queryRE, '')
 
-export const resolveRelativeRequest = (importer: string, id: string) => {
-  const resolved = slash(path.posix.resolve(path.dirname(importer), id))
-  const queryMatch = id.match(queryRE)
-  return {
-    // path resovle strips ending / which should be preserved
-    pathname: cleanUrl(resolved) + (id.endsWith('/') ? '/' : ''),
-    query: queryMatch ? queryMatch[0] : ''
-  }
-}
-
 export const parseWithQuery = (
   id: string
 ): {

test/test.js

@@ -470,25 +470,38 @@ describe('vite', () => {
       expect(await getText('.dir-alias-index')).toMatch(
         'directory alias index works'
       )
+      expect(await getText('.dir-alias-import-outside')).toMatch(
+        'directory aliased internal import outside works'
+      )
       if (!isBuild) {
         await updateFile('aliased/index.js', (c) =>
           c.replace('works', 'hmr works')
         )
         await expectByPolling(() => getText('.alias'), 'alias hmr works')
+
         await updateFile('aliased-dir/named.js', (c) =>
           c.replace('works', 'hmr works')
         )
         await expectByPolling(
           () => getText('.dir-alias'),
           'directory alias hmr works'
         )
+
         await updateFile('aliased-dir/index.js', (c) =>
           c.replace('works', 'hmr works')
         )
         await expectByPolling(
           () => getText('.dir-alias-index'),
           'directory alias index hmr works'
         )
+
+        await updateFile('aliased-dir-import.js', (c) =>
+          c.replace('works', 'hmr works')
+        )
+        await expectByPolling(
+          () => getText('.dir-alias-import-outside'),
+          'directory aliased internal import outside hmr works'
+        )
       }
     })