paths not used for auto import

[mjbvz]

From microsoft/vscode#72931

TypeScript Version: 3.5.0-dev.20190430

Search Terms:

• paths
• auto import

Repo

1. clone https://github.com/ac566/typescript-auto-import-issue and open in vscode
2. In VS Code, set "typescript.preferences.importModuleSpecifier": "non-relative"
3. Open src/app/app1/test.ts
4. Delete the import for TestType
5. Try using a quick fix or auto import to add the impact back

Expected behavior:
The import is added as import { TestType } from "@myLib/example_2";

The is expected since the tsconfig configures paths and the import of @myLib/example_2 was previously working properly:

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "baseUrl": ".",
        "paths": {
            "@myLib/*": [
                "./src/lib/src/*/_index.ts"
            ]
        }
    }
}

Actual behavior:
The import is added as import { TestType } from "@myLib/example_2/_index";

[blikblum]

I have the issue described below when using auto import in a project configured with compilerOptions.paths. Let me know if is a different problem that warranties a separated issue.

Using vscode 1.34 on windows with provided tsserver

I'm using webpack resolve option to add a path to look for "root" modules:

resolve: {
  modules: [path.resolve(__dirname, './src/common'), 'node_modules'],     
}

To match same behavior in vscode, i configure jsconfig.json compilerOptions.paths as suggested in TypeScript-Handbook:

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

See sample project: https://github.com/blikblum/vscode-autoimport-path

When i try to import from src/modules/main.js i get always relative to baseUrl which is clearly wrong:

import { myService } from "src/common/myservice";
import { otherService } from "src/common/other/otherservice";
import { Home } from "src/home/home";

If i remove "*" from paths (see this branch) things are a little better:

import { myService } from "myservice";
import { otherService } from "other/otherservice";
import { Home } from "src/home/home";

BTW this is the expected import:

import { myService } from "myservice";
import { otherService } from "other/otherservice";
import { Home } from "../home/home";

In this branch, i try to use an empty jsconfig.json and get a technically correct import although not useful to achieve the intended behavior.

[WanderWang]

I got a same issue

[fmatzy]

I faced the same issue in my sample project.

I guess this is the bug of compiler/moduleSpecifiers.ts#L260. The second argument of String#substr should be the length of matchedStar, or String#substring should be used.

[xYann00]

I got the same issue. Based on this stackoverflow post it is the same for both tsconfig.json and jsconfig.json.

Sadly this makes VS Code unusable for our project, baseUrl workaround is not possible since we have more paths and imports inserted by VS Code are not working in the running app.

[nautilor]

In my case just by using in my settings

"typescript.preferences.importModuleSpecifier": "non-relative",

and then setting in my tsconfig compilerOptions.paths my root as the last options I was able to import files using path correctly

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@model/*": ["src/model/*"],
      "@route/*": ["src/route/*"],
      "@constant/*": ["src/constant/*"],
      "@/*": ["src/*"]
    }
  },
}

This creates

import { JWT_CONFIG } from "@constant/jwt";

instead of

import { JWT_CONFIG } from "./constant/jwt";

or

import { JWT_CONFIG } from "@/constant/jwt";

which is what i was looking for.

[paustint]

@nautilor - thank you for the tip. I have adjusted my workspace settings and on first glance it seems to be working! If this is solid, then it will be a huge timesaver.

Thank you!

[nautilor]

@paustint
Glad to help 😁

[paustint]

I found there are some downsides for this approach in some cases.

I am here -> apps/api/src/app/controllers/sf-misc.controller.ts
I want to import from here -> apps/api/src/app/services/sf-misc.ts

The import resolves as this:
import { buildPackageXml } from 'apps/api/src/app/services/sf-misc';

When it should be:
import { buildPackageXml } from '../services/sf-misc';

But the auto-imports from a relative @appName/.. are working great :) 🤷

[nautilor]

I found there are some downsides for this approach in some cases.

I am here -> apps/api/src/app/controllers/sf-misc.controller.ts
I want to import from here -> apps/api/src/app/services/sf-misc.ts

The import resolves as this:
import { buildPackageXml } from 'apps/api/src/app/services/sf-misc';

When it should be:
import { buildPackageXml } from '../services/sf-misc';

But the auto-imports from a relative @appName/.. are working great :) 🤷

That's because non-realtive forces Visual Studio Code to use absolute paths instead of realtive ones so it will always import from the root of the project