feat: add resolve.tsconfigPaths option to resolve with tsconfig paths

packages/vite/src/node/config.ts

@@ -681,6 +681,7 @@ export const configDefaults = Object.freeze({
     noExternal: [],
     external: [],
     preserveSymlinks: false,
+    tsconfigPaths: false,
     alias: [],
   },
 
@@ -1934,6 +1935,17 @@ assetFileNames isn't equal for every build.rollupOptions.output. A single patter
     )
   }
 
+  if (
+    resolved.resolve.tsconfigPaths &&
+    resolved.experimental.enableNativePlugin === false
+  ) {
+    resolved.logger.warn(
+      colors.yellow(`
+(!) resolve.tsconfigPaths is set to true, but native plugins are disabled. To use resolve.tsconfigPaths, please enable native plugins via experimental.enableNativePlugin.
+`),
+    )
+  }
+
   return resolved
 }
 
@@ -2177,6 +2189,7 @@ async function bundleConfigFile(
             dedupe: [],
             extensions: configDefaults.resolve.extensions,
             preserveSymlinks: false,
+            tsconfigPaths: false,
             packageCache,
             isRequire,
             builtins: nodeLikeBuiltins,

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

@@ -114,6 +114,15 @@ export interface ResolveOptions extends EnvironmentResolveOptions {
    * @default false
    */
   preserveSymlinks?: boolean
+  /**
+   * Enable tsconfig paths resolution
+   *
+   * This option does not have any effect if `experimental.enableNativePlugin` is set to `false`.
+   *
+   * @default false
+   * @experimental
+   */
+  tsconfigPaths?: boolean
 }
 
 interface ResolvePluginOptions {
@@ -266,7 +275,7 @@ export function oxcResolvePlugin(
             tryIndex: options.tryIndex ?? true,
             tryPrefix: options.tryPrefix,
             preserveSymlinks: options.preserveSymlinks,
-            tsconfigPaths: false,
+            tsconfigPaths: options.tsconfigPaths,
           },
           environmentConsumer: partialEnv.config.consumer,
           environmentName: partialEnv.name,

packages/vite/src/node/ssr/fetchModule.ts

@@ -57,6 +57,7 @@ export async function fetchModule(
       extensions: ['.js', '.cjs', '.json'],
       dedupe,
       preserveSymlinks,
+      tsconfigPaths: false,
       isBuild: false,
       isProduction,
       root,

playground/resolve-tsconfig-paths/__tests__/resolve.spec.ts

@@ -0,0 +1,14 @@
+import { expect, test } from 'vitest'
+import { page } from '~utils'
+
+test('import from .ts', async () => {
+  await expect.poll(() => page.textContent('.ts')).toMatch('[success]')
+})
+
+test('import from .js', async () => {
+  await expect.poll(() => page.textContent('.js')).toMatch('[success]')
+})
+
+test('fallback works', async () => {
+  await expect.poll(() => page.textContent('.fallback')).toMatch('[success]')
+})

playground/resolve-tsconfig-paths/fallback/fallback.js

@@ -0,0 +1 @@
+export default '[success] imported from fallback'

playground/resolve-tsconfig-paths/index.html

@@ -0,0 +1,25 @@
+<h1>Resolve: tsconfig paths</h1>
+
+<h2>Import from .ts</h2>
+<p class="ts"></p>
+
+<h2>Import from .js</h2>
+<p class="js"></p>
+
+<h2>Fallback works</h2>
+<p class="fallback"></p>
+
+<script type="module">
+  function text(selector, text) {
+    document.querySelector(selector).textContent = text
+  }
+
+  import ts from './src/ts.ts'
+  text('.ts', ts)
+
+  import js from './src/js.js'
+  text('.js', js)
+
+  import fallback from '@fallback/fallback'
+  text('.fallback', fallback)
+</script>

playground/resolve-tsconfig-paths/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@vitejs/test-resolve-tsconfig-paths",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  }
+}

playground/resolve-tsconfig-paths/src/imported.js

@@ -0,0 +1 @@
+export default '[success] imported'

playground/resolve-tsconfig-paths/src/js.js

@@ -0,0 +1 @@
+export { default } from '@/imported'

playground/resolve-tsconfig-paths/src/ts.ts

@@ -0,0 +1 @@
+export { default } from '@/imported'

playground/resolve-tsconfig-paths/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@fallback/*": ["./src/*", "./fallback/*"]
+    }
+  },
+  "exclude": ["./__tests__"]
+}

playground/resolve-tsconfig-paths/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  resolve: {
+    tsconfigPaths: true,
+  },
+  experimental: {
+    enableNativePlugin: 'resolver',
+  },
+})

playground/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "include": ["**/vite*config*", "**/*.ts"],
-  "exclude": ["**/dist/**", "./legacy/**"],
+  "exclude": ["**/dist/**", "./legacy/**", "./resolve-tsconfig-paths/**"],
   "compilerOptions": {
     "checkJs": true,
     "target": "ES2023",