Auto import in Visual Studio Code only offering absolute path with Lerna subpackages in TypeScript

Question

For some reason, very recently my Visual Studio Code changed and started only offering absolute imports from the sub-package level with my Lerna packages, for example:

As you can see, the auto import is suggesting the @package/server/src/database path to the file when it should just be ../database as the file being edited is within the same package and is just one folder below the file containing the database variable I'm trying to use.

Is this a bug or configuration issue?

I've set my Import Module Specifiersetting for TypeScript in Visual Studio Code to all three options (auto, relative, and absolute) and none of them seem to make any difference.

I'll play with this if you set up a repository that I can clone to reproduce the problem. (I don't want to spend the time to try to set up a project like yours by myself only to potentially fail to reproduce the problem.) — Matt McCutchen, Sep 24 '18 at 00:11
Fwiw, at least one user has `importModuleSpecifier` set to `relative` in workplace and user files and it still imports with a full pat -- edit: [this question](https://stackoverflow.com/a/51443713/1028230) suggested TS version -- there, a different version and issue -- could cause weirdness. Changing from TS 2.3.2 to 3.4.5 resolved this issue for me. /shrug — ruffin, May 30 '19 at 12:42

score 571 · Accepted Answer · edited Aug 12 '20 at 23:49

571

In Visual Studio Code, menu File → Preferences → Settings → User Settings,

"typescript.preferences.importModuleSpecifier": "relative"

It works fine for me. It imports

import { RegistrationComponent } from '../../abc-modules/registration/registration.component';

in place of

import { RegistrationComponent } from 'app/abc-modules/registration/registration.component';

edited Aug 12 '20 at 23:49

Peter Mortensen

30,738
21
105
131

answered Nov 04 '18 at 03:42

limbo93

6,488
1
12
14

3

Thank you! When it's set to auto, it seems to change between using relative and absolute. – Moulde Feb 06 '19 at 12:28
1

I will pointout something: It is much better to have absolute path but starting from source dir (src/) like "import .. from "my-module/bla/bla/ClassName.js" because that approach will let You move packages and classes without changing imports. So You should avoid relative paths. – John Tribe Jul 14 '19 at 06:54
31

John Tribe's advice is legit with Vanilla JS. However I use TypeScript with "src" folder for TS and "dist" folder for transplied JS, so absolute path causes runtime error. – hirikarate Aug 31 '19 at 04:27
amazing solution. @hirikarate, do your self a favor, stop using abs paths. the ecosystem does not fully supports it (including the IDEs). I spent 6 months to make it work. total waste of time – Stav Alfi Aug 20 '20 at 15:47
6

`JavaScript › Preferences: Import Module Specifier Preferred path style for auto imports.` --> `relative` (Also, for jest testing, absolute paths break the test suite @JohnTribe.) – auerbachb Oct 19 '20 at 21:11
3

If it's not working: Note that you need to change the Typescript > Preference, not Javascript > Preference – blub Jan 11 '22 at 11:38
Did anyone tell you if this is more beautiful? – Aziz Aug 15 '22 at 10:21
2

There is also "project-relative" now, which makes it only prefer the relative import from within the same project. Useful for us with an NX monorepo setup, using tsconfig paths. Just using "relative" made vscode suggest relative imports instead of our configured paths. – Ward D.S. Nov 30 '22 at 17:33

score 70 · Answer 2 · answered Dec 15 '21 at 15:04

70

In Visual Studio Code, menu File → Preferences → Settings → User Settings

search by importModuleSpecifier

answered Dec 15 '21 at 15:04

Luiz Carlos Pedroso Gomes

904
8
14

2

It's works for me. Remember this tip works only typescript. You need the same steps to works do .js files – Iago Leão Feb 04 '22 at 13:20
Oh it's doing shortest for default! I could not figure out why some imports were /app and some were ../ That's a good brainteaser. I failed. – Simon_Weaver Jun 20 '22 at 19:53
+ better to use "typescript.preferences.importModuleSpecifier": "project-relative" – Sergio Nikolaev Feb 22 '23 at 13:09

score 8 · Answer 3 · edited Aug 12 '20 at 23:51

8

I landed here from Google and had the opposite problem. My Visual Studio Code instance always imported the relative path even though it was from a different Lerna package.

It turns out that I simply forgot to add the package that it was wrongly importing to my consuming package’s package.json file.

Now, everything works as expected.

edited Aug 12 '20 at 23:51

Peter Mortensen

30,738
21
105
131

answered Feb 14 '20 at 14:26

Florian Wendelborn

1,667
1
19
29

2

Similarly, using NX and tsconfig paths, we fixed that by using "project-relative" as the importModuleSpecifier. Using just relative changed the other project's import to relative as well which is of course not what we wanted. "project-relative" works great though. – Ward D.S. Nov 30 '22 at 17:35

score 7 · Answer 4 · answered Mar 29 '23 at 05:54

My problem was that I had the baseUrl option set in my tsconfig.json file.

{
  "compilerOptions": {
    "baseUrl": ".", // remove
  },
}

After removing the option; VSCode immediately started importing via the relative path. The benefit of this method is that you can keep the VSCode option importModuleSpecifier set to shortest and relative path importing will still work.

Auto import in Visual Studio Code only offering absolute path with Lerna subpackages in TypeScript

4 Answers4

Linked