Typescript prefers importing relative import instead of path alias

Issue

Is there a way to force TS to use a path alias for imports if there is one available? (I use VSCode)

import { ApiError } from '../../../../libs/shared/src'; // This is imported by default
//import { ApiError } from '@rita/shared'; // I want this


const err: ApiError = { /* ... */ };

Ts config extract

{
    "compilerOptions": {
        "rootDir": ".",
        "baseUrl": ".",
        "allowSyntheticDefaultImports": true,
        "target": "ES2017",
        "module": "esnext",
        "moduleResolution": "node",
        "forceConsistentCasingInFileNames": true,
        "importHelpers": true,
        "paths": {
            "@rita/helpers": ["libs/helpers/src/index.ts"],
            "@rita/maps": ["libs/maps/src/index.ts"],
            "@rita/rxjs": ["libs/rxjs/src/index.ts"],
            "@rita/shared": ["libs/shared/src/index.ts"]
        }
    }
}

Solution

I had the same problem and fixed it following this github issue https://github.com/Microsoft/vscode/issues/59815

Inside Visual Studio Code, go to Settings by typing Ctrl + , (Windows/Linux) or CMD + , (Mac), then using the Search settings box, search for importModuleSpecifier, then select from TypeScript section non-relative.

Answered By - Luis Salazar