fix(resolve): try .tsx extension for .js import from typescript module

packages/vite/src/node/__tests__/utils.spec.ts

@@ -1,4 +1,4 @@
-import { injectQuery, isWindows } from '../utils'
+import { getPotentialTsSrcPaths, injectQuery, isWindows } from '../utils'
 
 if (isWindows) {
   // this test will work incorrectly on unix systems
@@ -38,3 +38,25 @@ test('path with unicode, space, and %', () => {
     '/usr/vite/東京 %20 hello?direct'
   )
 })
+
+test('ts import of file with .js extension', () => {
+  expect(getPotentialTsSrcPaths('test-file.js')).toEqual([
+    'test-file.ts',
+    'test-file.tsx'
+  ])
+})
+
+test('ts import of file with .jsx extension', () => {
+  expect(getPotentialTsSrcPaths('test-file.jsx')).toEqual(['test-file.tsx'])
+})
+
+test('ts import of file .mjs,.cjs extension', () => {
+  expect(getPotentialTsSrcPaths('test-file.cjs')).toEqual(['test-file.cts'])
+  expect(getPotentialTsSrcPaths('test-file.mjs')).toEqual(['test-file.mts'])
+})
+
+test('ts import should not match .js that is not extension', () => {
+  expect(getPotentialTsSrcPaths('test-file.js.mjs')).toEqual([
+    'test-file.js.mts'
+  ])
+})

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

@@ -27,7 +27,7 @@ import {
   isFileReadable,
   isTsRequest,
   isPossibleTsOutput,
-  getTsSrcPath
+  getPotentialTsSrcPaths
 } from '../utils'
 import type { ViteDevServer, SSROptions } from '..'
 import type { PartialResolvedId } from 'rollup'
@@ -436,16 +436,20 @@ function tryResolveFile(
 
   const tryTsExtension = options.isFromTsImporter && isPossibleTsOutput(file)
   if (tryTsExtension) {
-    const tsSrcPath = getTsSrcPath(file)
-    return tryResolveFile(
-      tsSrcPath,
-      postfix,
-      options,
-      tryIndex,
-      targetWeb,
-      tryPrefix,
-      skipPackageJson
-    )
+    const tsSrcPaths = getPotentialTsSrcPaths(file)
+    for (const srcPath of tsSrcPaths) {
+      const res = tryResolveFile(
+        srcPath,
+        postfix,
+        options,
+        tryIndex,
+        targetWeb,
+        tryPrefix,
+        skipPackageJson
+      )
+      if (res) return res
+    }
+    return
   }
 
   if (tryPrefix) {

packages/vite/src/node/utils.ts

@@ -189,8 +189,16 @@ const knownTsOutputRE = /\.(js|mjs|cjs|jsx)$/
 export const isTsRequest = (url: string) => knownTsRE.test(cleanUrl(url))
 export const isPossibleTsOutput = (url: string) =>
   knownTsOutputRE.test(cleanUrl(url))
-export const getTsSrcPath = (filename: string) =>
-  filename.replace(/\.([cm])?(js)(x?)(\?|$)/, '.$1ts$3')
+export const getPotentialTsSrcPaths = (filename: string) => {
+  // Special handling for filenames that end in `.js`, since they may actually
+  // refer to a `.ts` or `.tsx` file in TypeScript.
+  if (filename.endsWith('.js')) {
+    const extensionLessFile = filename.slice(0, -3)
+    return [`${extensionLessFile}.ts`, `${extensionLessFile}.tsx`]
+  }
+
+  return [filename.replace(/\.([cm])?(js)(x?)(\?|$)/, '.$1ts$3')]
+}
 
 const importQueryRE = /(\?|&)import=?(?:&|$)/
 const internalPrefixes = [