search

rowanfreeman / gatsby-plugin-alias-imports

Plugin for Gatsbyjs that allows you to alias path locations when importing.
https://www.gatsbyjs.org/packages/gatsby-plugin-alias-imports
MIT License
10 stars 1 forks source link

How to use with Typescript? #3

Open uuykay opened 4 years ago

uuykay commented 4 years ago

Hi there,

So I love this plugin, but wanted to try using it with Typescript. I installed the "gatsby-plugin-typescript" and when I convert a .js file to .tsx, TS complains about not being able to find the module. For example:

import ContentContainer from "@components/ContentContainer"

Cannot find module '@components/ContentContainer'.

I have tried following the guide here https://www.mrozilla.cz/blog/gatsby-eslint-vscode-import-alias/ without success. Any hints?

lettertwo commented 4 years ago

Typescript has a path mapping feature that can be configured to alias modules. The most straightforward way I know of to do this is to configure in tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@*": ["src/*"]
    }
}
nleco commented 3 years ago

does this only work on .ts[x] files? I can't seem to get this to work.

joebentaylor1995 commented 2 years ago

@lettertwo 's fix doesnt work. Tried this but this doesnt fix anything