Typescript: Auto imports showing imports from `../../node_modules/@types`

[mjbvz]

Manually moving https://github.com/Microsoft/vscode/issues/47005 to TS Repo to continue investigation

@techsin reports that they are seeing auto import suggestions for paths such as ../../../node_modules/@types. They are using TypeScript 2.7.2 and have a jsconfig.json with proper excludes configured.

Here's the TS Server log: tsserver.log

[yortus]

This is how node.js module lookup works, and there are workflows that rely on the current lookup behaviour. For example monorepos using tools like lerna will have their node modules at the monorepo root, which may be several directories up from the package.json of packages declaring the dependencies.

[techsin]

@yortus one should be able to disable lookup beyond root directory using jsconfig.json at least. Otherwise, autosuggest feature becomes a obstacle. It causes random auto imports, which you might not be aware of if you were working at line 80.

[yortus]

@techsin I just noticed that this had been labeled as a bug and wanted to point out that the current behaviour is not a bug. An option sounds appropriate.

[techsin]

there is an option in jsconfig / tsconfig that tells what to exclude, but despite telling it to exclude node_modules, it doesn't. Not the one in project root, or above in user directory. Thus the bug.

{
    "compilerOptions": {
        "target": "es6"
    },
    "exclude": [
        "node_modules", <--- no effect
        "../../node_modules", <--- no effect
        "**/node_modules/*" <--- no effect
    ]
}

[yortus]

Ok, got it now. The issue title makes it look like the lookup behaviour is the problem, but it's actually the exclude behaviour. I should have read the original issue, sorry!

[techsin]

No, Problem. I just want it fixed, more than 10 times, I've pressed tab thinking it'd do something I want and end up importing random stuff which doesn't go away with 1 ctrl+z. So you have to delete whatever it expanded to and delete the line at top that says import {InksljdEjlkdjksl} from "../../../AppData/Microsoft/Typescript/node_modules/Something/@types/something/something"

kind makes you never use autocomplete again.

So glad there is built in git diff, so you can actually view one last time all things that are going to be changed.

[andy-ms]

@techsin I'm having trouble reproducing this with typescript@next. I get import completions for foo and not for ../node_modules/foo. Try doing npm install -g typescript@next and pointing vscode to it (instructions). If it's still happening, could you try to get a sample project that reproduces the error that you could share?

[techsin]

https://github.com/techsin/vscodeAutoCompleteBug

interestingly, through process of elimination, i was able to nail it down to pug package. but i dont know how pug package would cause to override jsconfing.json

[techsin]

[andy-ms]

When I try that with typescript@next:

• First, I need to add export {} to turn the file into an ES6 module, otherwise we won't add import completions due to #22951
• Second, I'm getting the import from "babel-types/index" and not from ../node_modules/@types/babel-types/index. (The /index is because we default to using "classic" module resolution, you can add "moduleResolution": "node" to get it to just babel-types. #23291)

[techsin]

I'm not sure I understand what you're saying. But auto complete suggestion aren't broken just for import statements, they're broken for almost every combination of letters 3 to 5 you write.

[andy-ms]

What I'm saying is that I tried reproducing the error, but I don't get the behavior you're seeing. I see an auto import from "babel-types/index", not ../node_modules/@types/babel-types/index. Could you double-check that you're testing with typescript@next? Vscode should show you in the bottom-right, what language server version you're using.

[mhegazy]

Closing for now, please reopen if more info is available.

[zenmumbler]

In VS Code, auto import suggestions broke in a similar way for me. I use Yarn's workspaces feature in a monorepo, i.e. a single repo with many packages in a packages folder. All these packages have their own package.json but yarn places the combined imports together in a node_modules folder in the repo root. All of my packages are namespaced like @stardazed/{package}. Yarn workspaces will put links to all the subpackages in the root node_modules folder.

With VSCode 1.24.1 (latest as of now) which has TypeScript 2.9.1 bundled I get proper auto import suggestions: i.e. auto-import X from "@stardazed/package", but I have TS 2.9.2 installed globally and I set the TSDK preference to use that then suddenly auto-imports starts suggesting both:auto-import X from "../../node_modules/@stardazed/package and auto-import X from "../../node_modules/@stardazed/package/src

I changed back to 2.9.1 but this is a reproducible regression in 2.9.2, simply by enabling or disabling the TSDK preference and reloading the VSC window I can break/repair auto-imports. Not sure if this is a separate issue from this one, please advise @mhegazy

[mhegazy]

@zenmumbler can you share more info? like a sample project

[mike-north]

I'm seeing this as well.
small example case: https://github.com/mike-north/vscode-module-res-demo

This issue arises whether or not I already have an existing import from the module in place. Interestingly, if there's an existing import in place, the new symbol is added to it. If there's no existing import, a new one is created at the ../node_modules/..... path

---

The fix:

1. Update to typescript@next
2. Make sure VSCode is using your project-local typescript installation

it might be worth cherry picking the fix in a 2.9.* patch release

[mhegazy]

@mike-north just to confirm, you do not see issues when you update to typescript@next. Is this accurate?

[mike-north]

Correct, although I wish I didn't have to update to @next because there are other issues causing trouble now. A 2.9.x patch release would be nice

[mhegazy]

[email protected] should be available with the fix tomorrow.

[sapabg]

This started happening for me too - when I need to import something from the node_modules folder it includes the relative path to it import { MatSnackBar } from '../../../../../node_modules/@angular/material'; for instance...when it should be just '@angular/material'
I can't update to [email protected] ot typescript@next because of this error:
ERROR in The Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but 3.0.0-dev.20180712 was found instead.
And ot top of that it used to wirk properly and I haven't changed anything in my projects and typescript versions...I think it started happening after Code update...

[KostaMadorsky]

I am having exactly the same issues as @sapabg (seems like after VS Code update)

[andy-ms]

@MadKonst Could you create an issue containing a full sample project (probably just a tsconfig.json and a single file with a missing import)? And also test with typescript@next?

[Jrubzjeknf]

A possible solution for those dealing with relative node_modules imports.

[lordgreg]

Installing latest Typescript (at least 3.x!) locally and using it worked. Hopefully, VSCode itself updates it too.

[sapabg]

For me it worked without having to update typescript to 3.x, I just switched to "Use workspace version" witch is 2.8.1 and it seems to work properly now...

[chenyong]

@sapabg try if there's any other bugs. My colleague tried 2.8.x but found it has problems in importing other modules.

[KostaMadorsky]

Thanks @Jrubzjeknf Solution on the link worked for me (Angular 6 project).

[RayKimEX]

2.9.2 makes this problem. so, i downgrade version to 2.8.1,
therefore it works now ( it fixes problem, like ../../nodemodules )

[sistla001]

I am having exactly the same issue and resolved by setting typescript verison to use workspace version instead of VS Code version. Thanks

[techsin]

what if you are not using typescript, and thus can't update typescript!

[andy-ms]

@techsin The latest version of vscode should already have this fixed. If it's still happening, try doing npm install -g typescript@next and setting up vscode to use the version from npm rather than its own; if there's still a problem please file a new issue.