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,47 @@ 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',
+    'test-file.ctsx'
+  ])
+  expect(getPotentialTsSrcPaths('test-file.mjs')).toEqual([
+    'test-file.mts',
+    'test-file.mtsx'
+  ])
+})
+
+test('ts import of file with .js before extension', () => {
+  expect(getPotentialTsSrcPaths('test-file.js.js')).toEqual([
+    'test-file.js.ts',
+    'test-file.js.tsx'
+  ])
+})
+
+test('ts import of file with .js and query param', () => {
+  expect(getPotentialTsSrcPaths('test-file.js.js?lee=123')).toEqual([
+    'test-file.js.ts?lee=123',
+    'test-file.js.tsx?lee=123'
+  ])
+})
+
+test('ts import of non js file', () => {
+  expect(getPotentialTsSrcPaths('test-file.wasm')).toEqual(['test-file.wasm'])
+})
+
+test('ts import without any extension', () => {
+  expect(getPotentialTsSrcPaths('test-file')).toEqual(['test-file'])
+})

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,22 @@ 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) => {
+  const fileParts = filename.split(/(\.[cm]?js\?|\.[cm]?js$)/)
+
+  // If there are three parts, the file uses a .js, .mjs or .cjs extension.
+  // We replace the 'js' part with 'ts' and 'tsx'.
+  if (fileParts.length === 3) {
+    const [namePart, extension, queryPart] = fileParts
+
+    return [
+      `${namePart}${extension.replace('js', 'ts')}${queryPart}`,
+      `${namePart}${extension.replace('js', 'tsx')}${queryPart}`
+    ]
+  }
+
+  return [filename.replace(/\.([cm])?(js)(x?)(\?|$)/, '.$1ts$3')]
+}
 
 const importQueryRE = /(\?|&)import=?(?:&|$)/
 const internalPrefixes = [