language-tools: Import aliases don't work with typescript in .astro files in vscode.

Astro info

Astro version            v2.10.14
Package manager          yarn
Platform                 linux
Architecture             x64
Adapter                  Couldn't determine.
Integrations             None or couldn't determine.

What browser are you using?

Not relevant

Describe the Bug

When running yarn create astro selecting a strict typescript project with sample files, then following the guide to enable import aliases, import alias don’t work in .astro files.

tsconfig.json:

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@layouts/*": ["src/layouts/*"]
    }
  }
}

src/pages/index.astro

import Card from '@components/Card.astro';

Doesn’t work in VSCode. It compiles fine, but there’s no types since ts can’t find the definition. Aliases also seem to work fine from .ts/.tsx files.

What’s the expected result?

import Card from '@components/Card.astro'; should result in a typed Card import.

Link to Minimal Reproducible Example

Minimal reproducible example is described above. Requires VSCode.

Participation

I am willing to submit a pull request for this issue.

About this issue

Original URL
State: closed
Created 10 months ago
Reactions: 3
Comments: 27 (9 by maintainers)

Most upvoted comments

In my case this solve the problem:

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@layouts/*": ["src/layouts/*"],
    }
  },
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
    "src/**/*.astro"
  ]
}

+18

Farnsi on Nov 7, 2023

I had to add *.astro to my includes, now it works, thanks @Farnsi .

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
    "src/**/*.astro"
  ]
}

+10

stav on Jan 17, 2024

Glad you figured it out, weird issue!

Since Astro 3.0 drops support for TypeScript 4 completely, I’ll close this issue, as everything should be working on any TypeScript 5.x version.

If this is still affecting some of you, feel free to create a new issue with new details.

Princesseuh on Sep 5, 2023

OK, so…

I had this in my tsconfig.json:

  "include": [
    "src/types.d.ts",
  ],

This is what the support AI in Astro’s Discord channel suggested adding, along with the actual types.d.ts in src/. I removed this line, and the types.d.ts file, and now aliases are resolving correctly with no errors.

However, I only added this line yesterday. Before that, if I recall, I had a value of * in there, and then had some excludes set (node_modules etc). This in turn was a remnant of trying to fix the problem using StackExchange some weeks ago.

Seems like having that include directive is the problem, at least for me. I wonder if something like this is happening with @miklschmidt?

But here’s what’s even weirder:

Before I fixed this, I also opened the (then-broken) project in Webstorm. And it resolved those aliases just fine using the same (apparently broken) tsconfig.json. Wth?

bnonn on Aug 30, 2023

I also needed to add the include property to my tsconfig.json file to get this working.

For reference, here is my working tsconfig.json file:

{
  "exclude": ["node_modules"],
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
    "src/**/*.astro"
  ],
  "extends": "astro/tsconfigs/strictest",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "#assets/*": ["src/assets/*"],
      "#auth/*": ["src/auth/*"],
      "#components/*": ["src/components/*"],
      "#database/*": ["db/*"],
      "#layouts/*": ["src/layouts/*"]
    }
  }
}

kee-oth on Jan 28, 2024