tsc can't find .astro file imported in .ts

[shy shard]

I'm importing an .astro file from a .ts file in the same folder, but both tsc and Vite say they can't find it.

Would it help to have a .d.ts , and what would that contain for an Astro component?

[clever burrow]

Hi @shy shard. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Astro currently does not support importing .astro files directly into .ts files. This is because TypeScript does not recognize .astro files. When you try to import an Astro component in a TypeScript file, you'll encounter errors because TypeScript can't find the .astro file you're trying to import (source (https://github.com/withastro/astro/issues/6858)).

However, there is a workaround. You can use the Astro TypeScript plugin to support importing .astro files from .ts files. This can be useful for re-exporting. You can install the Astro TypeScript plugin using npm, pnpm, or Yarn:

npm install @astrojs/ts-plugin
pnpm add @astrojs/ts-plugin
yarn add @astrojs/ts-plugin

Then, add the following to your tsconfig.json:

"compilerOptions": { "plugins": [ { "name": "@astrojs/ts-plugin" }, ], }

(source (https://docs.astro.build/en/guides/typescript#setup))

As for the .d.ts file, Astro includes an env.d.ts file in the src folder of your project. This file provides Vite’s client types to your project. It's necessary for Astro's TypeScript support and powers several of Astro's features (source (https://github.com/withastro/astro/issues/6013)).

Please note that the Astro dev server won't perform any type checking, but you can use a separate script to check for type errors from the command line (source (https://docs.astro.build/en/guides/typescript#_top)).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@shy shard kapa.ai is still learning and improving, please let us know how it did by reacting below

[shy shard]

I already have the <@&1055234544183287879>/ts-plugin installed, as a devDependency, as is astro. It's configured in tsconfig.json compiler options as you say. But again, both Vite and tsc if I try that error on not finding the .astro file