Fixing TS issues in VS Code - Astro
Sometimes I run into issues in VS Code when working in my Astro projects, I don’t know it it’s VS Code, TypeScript, Astro, more likely a combination of it all.
Sometimes errors are subtle / confusing, for example in one case I create a file and imported it, but I got a red line under the import saying Cannot find module ... or its corresponding type declarations
You can try opening the VS Code command palette and execute Developer: Restart Extension Host
or Developer: Reload Window
and more often than not, the error goes away.
Also try stopping npm run dev
and restarting it.
Final try, close VS Code and reopen it.
In one case I created a collection but TS didn’t pick up the type of the posts correctly, and got “any”:
In this case I had to create a markdown file for my content collection first, corresponding to how I defined the collection in my content/config.ts
in src/content/blog/test.md
, then the error went away.
That was easy.
Other times it’s an import error. First of course check the path is correct.
If using @
imports, check tsconfig.json
contains that and the file is saved.
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components/*": ["src/components/*"],
"@layouts/*": ["src/layouts/*"],
"@lib/*": ["src/lib/*"],
"@data/*": ["src/data/*"],
"@src/*": ["src/*"],
}
}
}
One issue a student of mine had with an Astro site that used content collections was that the TS types for that collection were not generated, and had errors like “Property ‘render’ does not exist on type ‘never’”
Running npx astro sync
fixed the issue.
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025