diff --git a/.changeset/hungry-ears-clap.md b/.changeset/hungry-ears-clap.md
new file mode 100644
index 000000000..e10b35f58
--- /dev/null
+++ b/.changeset/hungry-ears-clap.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Allow importing .ts files with .js extension
diff --git a/packages/astro/src/vite-plugin-astro/index.ts b/packages/astro/src/vite-plugin-astro/index.ts
index 790262249..91eadf9e3 100644
--- a/packages/astro/src/vite-plugin-astro/index.ts
+++ b/packages/astro/src/vite-plugin-astro/index.ts
@@ -216,6 +216,13 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
return {
code: `${code}${SUFFIX}`,
map,
+ meta: {
+ vite: {
+ // Setting this vite metadata to `ts` causes Vite to resolve .js
+ // extensions to .ts files.
+ lang: 'ts'
+ }
+ }
};
} catch (err: any) {
// Verify frontmatter: a common reason that this plugin fails is that
diff --git a/packages/astro/src/vite-plugin-markdown/index.ts b/packages/astro/src/vite-plugin-markdown/index.ts
index 6a8d59767..6f0410bbb 100644
--- a/packages/astro/src/vite-plugin-markdown/index.ts
+++ b/packages/astro/src/vite-plugin-markdown/index.ts
@@ -194,6 +194,11 @@ ${tsResult}`;
return {
code: escapeViteEnvReferences(code),
map: null,
+ meta: {
+ vite: {
+ lang: 'ts'
+ }
+ }
};
}
diff --git a/packages/astro/test/fixtures/import-ts-with-js/src/bar.ts b/packages/astro/test/fixtures/import-ts-with-js/src/bar.ts
new file mode 100644
index 000000000..98b90b031
--- /dev/null
+++ b/packages/astro/test/fixtures/import-ts-with-js/src/bar.ts
@@ -0,0 +1,3 @@
+export default function() {
+ return 'bar';
+}
diff --git a/packages/astro/test/fixtures/import-ts-with-js/src/foo.ts b/packages/astro/test/fixtures/import-ts-with-js/src/foo.ts
new file mode 100644
index 000000000..95492488d
--- /dev/null
+++ b/packages/astro/test/fixtures/import-ts-with-js/src/foo.ts
@@ -0,0 +1,3 @@
+import bar from './bar.js';
+
+export default bar;
diff --git a/packages/astro/test/fixtures/import-ts-with-js/src/pages/index.astro b/packages/astro/test/fixtures/import-ts-with-js/src/pages/index.astro
new file mode 100644
index 000000000..36186b21b
--- /dev/null
+++ b/packages/astro/test/fixtures/import-ts-with-js/src/pages/index.astro
@@ -0,0 +1,9 @@
+---
+import foo from '../foo.js';
+---
+
+
+
+ { foo() }
+
+
diff --git a/packages/astro/test/fixtures/import-ts-with-js/src/pages/post.md b/packages/astro/test/fixtures/import-ts-with-js/src/pages/post.md
new file mode 100644
index 000000000..f2b81e605
--- /dev/null
+++ b/packages/astro/test/fixtures/import-ts-with-js/src/pages/post.md
@@ -0,0 +1,8 @@
+---
+setup: |
+ import foo from '../foo.js'
+---
+
+# Testing
+
+## { foo() }
diff --git a/packages/astro/test/import-ts-with-js.test.js b/packages/astro/test/import-ts-with-js.test.js
new file mode 100644
index 000000000..d3882ae8f
--- /dev/null
+++ b/packages/astro/test/import-ts-with-js.test.js
@@ -0,0 +1,25 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Using .js extension on .ts file', () => {
+ /** @type {import('./test-utils').Fixture} */
+ let fixture;
+
+ before(async () => {
+ fixture = await loadFixture({ root: './fixtures/import-ts-with-js/' });
+ await fixture.build();
+ });
+
+ it('works in .astro files', async () => {
+ const html = await fixture.readFile('/index.html');
+ const $ = cheerio.load(html);
+ expect($('h1').text()).to.equal('bar');
+ });
+
+ it('works in .md files', async () => {
+ const html = await fixture.readFile('/post/index.html');
+ const $ = cheerio.load(html);
+ expect($('h2').text()).to.equal('bar');
+ });
+});