diff --git a/packages/playground/vue-jsx/TsImport.vue b/packages/playground/vue-jsx/TsImport.vue new file mode 100644 index 00000000000000..c63923d51947fa --- /dev/null +++ b/packages/playground/vue-jsx/TsImport.vue @@ -0,0 +1,8 @@ + + + diff --git a/packages/playground/vue-jsx/TsImportFile.ts b/packages/playground/vue-jsx/TsImportFile.ts new file mode 100644 index 00000000000000..62761d5733b432 --- /dev/null +++ b/packages/playground/vue-jsx/TsImportFile.ts @@ -0,0 +1 @@ +export const foo = 'success' diff --git a/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts b/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts index 999fdc19af51ec..275c918684119d 100644 --- a/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts +++ b/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts @@ -9,6 +9,7 @@ test('should render', async () => { expect(await page.textContent('.src-import')).toMatch('5') expect(await page.textContent('.jsx-with-query')).toMatch('6') expect(await page.textContent('.other-ext')).toMatch('Other Ext') + expect(await page.textContent('.ts-import')).toMatch('success') }) test('should update', async () => { diff --git a/packages/playground/vue-jsx/main.jsx b/packages/playground/vue-jsx/main.jsx index e304e7788e49e7..f13e60c45367c0 100644 --- a/packages/playground/vue-jsx/main.jsx +++ b/packages/playground/vue-jsx/main.jsx @@ -7,6 +7,7 @@ import JsxSrcImport from './SrcImport.vue' import JsxSetupSyntax from './setup-syntax-jsx.vue' // eslint-disable-next-line import JsxWithQuery from './Query.jsx?query=true' +import TsImport from './TsImport.vue' function App() { return ( @@ -20,6 +21,7 @@ function App() { + ) } diff --git a/packages/playground/vue/Main.vue b/packages/playground/vue/Main.vue index 87319acdf6f736..c5f3d27402fda7 100644 --- a/packages/playground/vue/Main.vue +++ b/packages/playground/vue/Main.vue @@ -15,6 +15,7 @@
this should be red
+ @@ -33,6 +34,7 @@ import CustomBlock from './CustomBlock.vue' import SrcImport from './src-import/SrcImport.vue' import Slotted from './Slotted.vue' import ScanDep from './ScanDep.vue' +import TsImport from './TsImport.vue' import AsyncComponent from './AsyncComponent.vue' import ReactivityTransform from './ReactivityTransform.vue' import SetupImportTemplate from './setup-import-template/SetupImportTemplate.vue' diff --git a/packages/playground/vue/TsImport.vue b/packages/playground/vue/TsImport.vue new file mode 100644 index 00000000000000..986c383b2b9f4b --- /dev/null +++ b/packages/playground/vue/TsImport.vue @@ -0,0 +1,8 @@ + + + diff --git a/packages/playground/vue/TsImportFile.ts b/packages/playground/vue/TsImportFile.ts new file mode 100644 index 00000000000000..62761d5733b432 --- /dev/null +++ b/packages/playground/vue/TsImportFile.ts @@ -0,0 +1 @@ +export const foo = 'success' diff --git a/packages/playground/vue/__tests__/vue.spec.ts b/packages/playground/vue/__tests__/vue.spec.ts index 025c05f53e8688..0bce5d1e1a03f5 100644 --- a/packages/playground/vue/__tests__/vue.spec.ts +++ b/packages/playground/vue/__tests__/vue.spec.ts @@ -14,6 +14,10 @@ test('template/script latest syntax support', async () => { expect(await page.textContent('.syntax')).toBe('baz') }) +test('import ts with .js extension with lang="ts"', async () => { + expect(await page.textContent('.ts-import')).toBe('success') +}) + test('should remove comments in prod', async () => { expect(await page.innerHTML('.comments')).toBe(isBuild ? `` : ``) }) diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts index 44b1de74721efd..6a5ab6fd5e2150 100644 --- a/packages/plugin-vue/src/main.ts +++ b/packages/plugin-vue/src/main.ts @@ -212,6 +212,11 @@ export async function transformMain( code: resolvedCode, map: resolvedMap || { mappings: '' + }, + meta: { + vite: { + lang: descriptor.script?.lang || descriptor.scriptSetup?.lang || 'js' + } } } } diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts index 1b59503a9d43ed..98a2cd8a9f776e 100644 --- a/packages/vite/src/node/plugins/resolve.ts +++ b/packages/vite/src/node/plugins/resolve.ts @@ -128,12 +128,19 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin { const options: InternalResolveOptions = { isRequire, - ...baseOptions, - isFromTsImporter: isTsRequest(importer ?? ''), scan: resolveOpts?.scan ?? baseOptions.scan } + if (importer) { + if (isTsRequest(importer)) { + options.isFromTsImporter = true + } else { + const moduleLang = this.getModuleInfo(importer)?.meta?.vite?.lang + options.isFromTsImporter = moduleLang && isTsRequest(`.${moduleLang}`) + } + } + let res: string | PartialResolvedId | undefined // resolve pre-bundled deps requests, these could be resolved by diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts index e7a20afbdd5ae7..bf4e12e764b7cb 100644 --- a/packages/vite/src/node/utils.ts +++ b/packages/vite/src/node/utils.ts @@ -228,7 +228,7 @@ export const isJSRequest = (url: string): boolean => { const knownTsRE = /\.(ts|mts|cts|tsx)$/ const knownTsOutputRE = /\.(js|mjs|cjs|jsx)$/ -export const isTsRequest = (url: string) => knownTsRE.test(cleanUrl(url)) +export const isTsRequest = (url: string) => knownTsRE.test(url) export const isPossibleTsOutput = (url: string) => knownTsOutputRE.test(cleanUrl(url)) export function getPotentialTsSrcPaths(filePath: string) {