Typescrcript path alias cannot find images, styles and other file extensions

Question

I currently have some react typescript projects, each project uses path alias, but I'm facing a annoying issue that, when import with path alias, the autocomplete for files like .png, .jpg, .scss and many other isn't found on path autocomplete. (it works fine when imported, the problem is just the annoying not working autocomplete that forces me to check the folder to get the file name)

When I use use the relative path such as import File from '../../../styles/...'; the autocomplete works fine. I'm not sure for exactly what I need to search with this error, I've tried, but with no success.

I'm using vscode with Path Intellisense extension, but since the issue happens on typescript path alias I don't believe it can mean anything.

Working:

Not working:

Don't show anything, if I hit ctrl+enter it show several useless autocompletes, but not the file inside the folder

tsconfig

{
  "compilerOptions": {
    "target": "es2020",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "downlevelIteration": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "./src",
    "types": ["cypress"]
  },
  "include": [
    "src"
  ]
}

Does this answer your question? [How to intellisense alias module path in VSCode](https://stackoverflow.com/questions/58249053/how-to-intellisense-alias-module-path-in-vscode) — Mário Garcia, Nov 05 '20 at 12:57

score 4 · Accepted Answer · edited Nov 11 '20 at 14:26

4

I have the same problem with CRA v4 and absolute imports. Only way I ended up working:

Install Path Intellisense + add "baseUrl": "src" to your tsconfig.json
DO NOT set "typescript.suggest.paths": false as suggest extension readme, let it as true
Add the following to your VSCode settings.json:

    "path-intellisense.mappings": {
        "/": "${workspaceFolder}",
        "assets": "${workspaceFolder}/src/assets",
        "pages": "${workspaceFolder}/src/pages",
        ... as many lines as folders you have under src, or order paths too
    }

edited Nov 11 '20 at 14:26

Dharman

30,962
25
85
135

answered Nov 11 '20 at 14:21

sevenlops

456
1
4
18

2

Works well whithout step 3,now VSC see other file paths.Upvoted. – Goran_Ilic_Ilke Feb 25 '21 at 12:28

score 0 · Answer 2 · answered Nov 05 '20 at 02:18

0

Did you try to define the paths configuration inside tsconfig.json?

{
  "compilerOptions": {
    "paths": {
      "@assets/*": ["your/path/to/assets/*"]
    }
  }
}

and use it like:

import Image from '@assets/';

Typescrcript path alias cannot find images, styles and other file extensions

2 Answers2