Typescript prefers importing relative import instead of path alias

Question

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"]
        }
    }
}

Kazantzakis

I don't think this is a TypeScript feature. Are you talking about something your IDE does (adding imports for you)? If so, which IDE? – Clarethaclaretta

You might be right... I use VSCode – Kazantzakis

Did you find a solution yet? I'm pretty sure this used to work, but somehow it is broken now. – Tetrahedral

Answer 1

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.

Algorithm

Answer 2

I've had this issue in VSCode. The problem was I have set importModuleSpecifier to relative in settings.json. Setting this to default fixed my issue.

{
   // remove this or set to "shortest"
  "typescript.preferences.importModuleSpecifier": "relative"
}

Amara

Answer 3

I have exactly the same problem and I think this issue is related to this https://github.com/microsoft/TypeScript/issues/47053.

For me, the absolute import, eg. @/components/ is always second option, no matter which setting I choose.

The solution mentioned here https://stackoverflow.com/a/72029899 did not work for me as well, and I also don't want to change anything about my index.ts import/exports.

What seems to help is to set paths to use ./ instead of @/ and use "typescript.preferences.importModuleSpecifier": "non-relative" setting in VSCode, but it feels really strange since it looks like a relative path.

Gadson

Answer 4

For me, this was the perfect solution:

"typescript.preferences.importModuleSpecifier": "project-relative"

This allows for relative imports in a project, but for any monorepo shared stuff I get the path I set up in my tsconfig.json

Ukase

Answer 5

For the config in paths object, try this:

{
  "@rita/helpers/*": ["libs/helpers/src/*"],
  "@rita/maps/*": ["libs/maps/src/*"],
  "@rita/rxjs/*": ["libs/rxjs/src/*"],
  "@rita/shared/*": ["libs/shared/src/*"]
}

Perhaps referencing the index.ts directly isn't right, as it's not a path, but a file. And the wildcard might be important too.

FYI: I'm referencing the TSConfig Reference.

Derrickderriey

But my index does export everything it needs. – Kazantzakis

This does change how I import things and sadly does not solve it. – Kazantzakis