#Inconsistent TypeScript import behavior

5 messages · Page 1 of 1 (latest)

lethal barn
#

I'm using path aliases and manifest files for cleaner imports. For example, here's a page that imports a component (e.g. pages/index.astro):

---
import { Card, PageHeader } from '@components'
import { Layout } from '@layouts'
---

<Layout title="...">
...

The manifest files look like this:

// components/index.ts
import Card, { Props as CardProps } from './Card.astro'

export { Card }

export type { CardProps }

And tsconfig.json:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@components": ["src/components/index"],
      "@layouts": ["src/layouts/index"],
      "@content": ["content/utils/index"],
      "@/*": ["./*"]
    }
  }
}

This works fine in dev mode and in VS Code. But there are two issues:

  1. astro check passes, but tsc --noEmit fails with this setup.
  2. If I try to import using aliases in a manifest file (e.g. import Card from '@/components/Card.astro), VS Code doesn't like it.

Error for #1 is:

Cannot find module './Card.astro' or its corresponding type declarations.
pulsar berry
#

You cannot run tsc on files that imports .astro components, it'll always be an error

#

For the VS Code part, it's possible that our TypeScript plugin is not working correctly... TypeScript plugins are notoriously brittle unfortunately, we're still working on it. You can try out the Pre-Release version of the extension to see if it helps or not

lethal barn
#

Thanks, @pulsar berry! So do you recommend just running astro check for the site code?

And perhaps if I have TS-specific utilities, I should put them in a separate place and run tsc only on those files that aren't interacting with the front end?

pulsar berry
#

Sure, that should work