typescriptintellij-ideaastrojs

AstroJS Aliases not resolving in IntelliJ Idea, with Typescript

This is not resolving for me in my IDE (but the compiler npm build, still builds)

enter image description here

I have already set tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "verbatimModuleSyntax": true
  },
  "baseUrl": ".",
  "paths": {
    "@components/*": ["src/components/*"],
    "@layouts/*": ["src/layouts/*"],
    "@assets/*": ["src/assets/*"],
    "@styles/*": ["src/styles/*"]
  }
}

And similarly in astro.config.mjs:

export default defineConfig({
  output: 'static',
  site: 'https://www.example.com',
  base: '/basepath',
  vite: {
    resolve: {
      // Define aliases
      alias: {
        '@components': path.resolve('./src/components'),
        '@layouts': path.resolve('./src/layouts'),
        '@assets': path.resolve('./src/assets'),
        '@styles': path.resolve('./src/styles'),
      }
    }
  },
}

Any pointers where I maybe going wrong?

Thanks in advance

Solution

  • The paths configuration in your tsconfig.json is supposed to be placed inside the compilerOptions. Like this:

    {
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "verbatimModuleSyntax": true,
    "baseUrl": ".",
    "paths": {
      "@components/*": ["./src/components/*"],
      "@layouts/*": ["./src/layouts/*"],
      "@assets/*": ["./src/assets/*"],
      "@styles/*": ["./src/styles/*"]
    }
  }
}

    Read more here; https://www.typescriptlang.org/tsconfig/#paths