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
– Matt McCutchen, Commented Sep 24, 2018 at 0: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 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
– ruffin, Commented May 30, 2019 at 12:42

Peter Mortensen · Accepted Answer · 2020-08-12 23:49:20Z

672

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, 2020 at 23:49

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Nov 4, 2018 at 3:42

limbo93

7,5571 gold badge15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Moulde Over a year ago

Thank you! When it's set to auto, it seems to change between using relative and absolute.

hirikarate Over a year ago

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.

auerbachb Over a year ago

JavaScript › Preferences: Import Module Specifier Preferred path style for auto imports. --> relative (Also, for jest testing, absolute paths break the test suite @JohnTribe.)

blub Over a year ago

If it's not working: Note that you need to change the Typescript > Preference, not Javascript > Preference

Ward D.S. Over a year ago

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.

|

Luiz Carlos Pedroso Gomes · Accepted Answer · 2021-12-15 15:04:34Z

109

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

search by importModuleSpecifier

answered Dec 15, 2021 at 15:04

Luiz Carlos Pedroso Gomes

1,2921 gold badge10 silver badges16 bronze badges

5 Comments

Iago Leão Over a year ago

It's works for me. Remember this tip works only typescript. You need the same steps to works do .js files

Simon_Weaver Over a year ago

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.

Sergio Nikolaev Over a year ago

+ better to use "typescript.preferences.importModuleSpecifier": "project-relative"

trainoasis Over a year ago

What If I wanted the import to be based on eslint rules? Ie. relative when current folder ie. "./XYZ" but absolute if "../"

Ajay Vishwakarma Sep 11 at 7:42

Worked for me thanks!

Jack · Accepted Answer · 2023-03-29 05:54:09Z

25

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.

answered Mar 29, 2023 at 5:54

Jack

7557 silver badges5 bronze badges

3 Comments

Pierre Thalamy Over a year ago

This was the most acceptable solution in my case as I wanted to keep using my webpack aliases for imports, and other solutions did cause aliases to stop getting suggested.

Homme Sauvage Over a year ago

Removing baseUrl might not be a good solution, because you might want to keep it for other imports. Unless you want to disable all absolute imports.

Pankaj Over a year ago

This one worked for me the best way; I needed to adjust the other aliases paths to be not relative to the base url but to the tsconfig

Peter Mortensen · Accepted Answer · 2020-08-12 23:51:05Z

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, 2020 at 23:51

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Feb 14, 2020 at 14:26

Florian Wendelborn

1,7671 gold badge21 silver badges30 bronze badges

1 Comment

Ward D.S. Over a year ago

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.

Qwerty · Accepted Answer · 2023-10-17 04:19:14Z

8

You might need a combination of baseUrl and paths.

tsconfig.json

  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "holograph/src/*": ["src/*"]
    },
  }

VSCode settings

"typescript.preferences.importModuleSpecifier": "non-relative" // or "shortest"

My folders are like this. When I am in apps/app, I can auto-import in VSCode from packages with from 'holograph/src/ui/...'. But when I am in packages/holograph ui components, for a reason I haven't yet discovered, it auto-imports from src/ui, which gives a build error. I had to manually import from the package path hologrpah/src/ui. Doing the above paths import re-map fixed VSCode auto-imports.

node_modules
apps (next.js applications)
 ├── app
 |   └── pages
 ├── operator
 ├── storybook
packages (shared components & libraries)
 ├── holograph
 |   └── src
 |       └── ui
 ├── tsconfig
 ├── eslint-config-holograph
...

PS: This worked too, but I am not sure how valid this is. Basically setting the baseUrl one folder up. 🤷‍♂️

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

answered Oct 17, 2023 at 4:19

Qwerty

32.5k26 gold badges131 silver badges159 bronze badges

1 Comment

MrEduar Over a year ago

Finally!!! This VSCode settings It does not appear anywhere!

Fox Desert · Accepted Answer · 2024-11-13 08:27:02Z

2

For anyone looking for only relative path within a project,
Add a line of option in settings.json

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

answered Nov 13, 2024 at 8:27

Fox Desert

1605 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

10 Comments

5 Comments

3 Comments

1 Comment

tsconfig.json

VSCode settings

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

10 Comments

5 Comments

3 Comments

1 Comment

tsconfig.json

VSCode settings

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related