Auto Import not working (Typescript ) after latest update

[Sheldonfrith]

Issue Type: Bug

Autocomplete imports have not worked for me since latest update. Specifically the list of suggestions that pops up when I'm typing, which normally I press "Tab" to select and automatically add the import statement at the top of the file. The suggestions are still there, but it no longer adds the import statement at the top of the file.

VS Code version: Code 1.60.0 (e7d7e9a9348e6a8cc8c03f877d39cb72e5dfb1ff, 2021-09-01T10:41:52.311Z) OS version: Windows_NT x64 10.0.19042 Restricted Mode: No

System Info

|Item|Value| |---|---| |CPUs|AMD Ryzen 9 3900X 12-Core Processor (24 x 3800)| |GPU Status|2d_canvas: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
rasterization: enabled
skia_renderer: enabled_on
video_decode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled| |Load (avg)|undefined| |Memory (System)|31.92GB (14.25GB free)| |Process Argv|--crash-reporter-id 34049ddb-b0b3-47a2-b7b3-23771ba5709f| |Screen Reader|no| |VM|0%|

Extensions (54)

Extension|Author (truncated)|Version ---|---|--- better-comments|aar|2.1.0 namespace|adr|1.1.2 to|ami|0.0.10 laravel-extra-intellisense|ami|0.6.1 vscode-django|bat|1.6.0 vscode-intelephense-client|bme|1.7.1 vscode-tailwindcss|bra|0.6.14 simple-react-snippets|bur|1.2.4 npm-intellisense|chr|1.4.0 path-intellisense|chr|2.4.0 vscode-svgviewer|css|2.0.0 vscode-eslint|dba|2.1.23 netcore-snippets|dog|3.15.1 python-extension-pack|don|1.6.0 vscode-html-css|ecm|1.10.2 vscode-npm-script|eg2|0.3.22 prettier-vscode|esb|8.1.0 comment-anchors|Exo|1.9.6 php-debug|fel|1.17.0 php-intellisense|fel|2.3.14 auto-rename-tag|for|0.1.8 vscode-pull-request-github|Git|0.30.0 gc-excelviewer|Gra|3.0.44 csharpextensions|jch|1.3.1 vscode-position|jtr|1.0.3 auto-comment-blocks|kev|1.0.1 vscode-github|Kni|0.30.6 json-trimmer|log|0.0.3 bash-ide-vscode|mad|1.11.0 MagicPython|mag|1.1.0 vscode-wrap-console-log|mid|1.7.2 vscode-docker|ms-|1.16.1 csharp|ms-|1.23.15 python|ms-|2021.9.1191016588 vscode-pylance|ms-|2021.9.0 jupyter|ms-|2021.8.2031190714 jupyter-keymap|ms-|1.0.0 remote-ssh|ms-|0.65.7 remote-ssh-edit|ms-|0.65.7 vscode-remote-extensionpack|ms-|0.21.0 laravel-blade|one|1.25.0 laravel5-snippets|one|1.13.0 material-icon-theme|PKi|4.10.0 phpdoc-comment-vscode-plugin|rex|1.3.0 lit-plugin|run|1.2.1 vscode-autohotkey|sle|0.2.2 addDocComments|ste|0.0.8 msbuild-project-tools|tin|0.3.15 highlight-matching-tag|vin|0.10.1 vscodeintellicode|Vis|1.2.14 jinja|who|0.0.8 change-case|wma|1.0.0 JavaScriptSnippets|xab|1.8.0 convert-object-to-jsx|zac|1.0.0 (2 theme extensions excluded)

A/B Experiments

``` vsliv368:30146709 vsreu685:30147344 python383:30185418 pythonvspyt602:30300191 vspor879:30202332 vspor708:30202333 vspor363:30204092 vswsl492:30256859 pythonvspyt639:30300192 pythontb:30283811 pythonvspyt551:30345470 pythonptprofiler:30281270 vshan820:30294714 vstes263:30335439 pythondataviewer:30285071 pythonvsuse255:30340121 vscod805:30301674 pythonvspyt200:30340761 vscextlangct:30333562 binariesv615:30325510 vsccppwtct:30329789 pythonvssor306:30344512 bridge0708:30335490 pygetstartedt2:30360495 bridge0723:30353136 pythonrunftest32:30361774 pythonf5test824cf:30361778 vsdyn321cf:30356811 pydsgst2:30361792 vscus224:30358039 vssid140:30362080 ```

[dariusj18]

Similar issue for me, except it's an issue where in my monorepo it is only suggesting imports using the package path even for files from the same package.

ex. If I have two packages @qwerty/foo and @qwerty/bar and I have a class Process in a file process.ts in the foo package, when I import it into bar it appropriatly imports it as import { Process } from '@qwerty/foo' but if I'm in foo, it should import it as import { Process } from './relative/path/process.ts' but it is doing the former.

[dariusj18]

To clarify, this is new bug for this version and did not exist in the prior release, I have downgraded for now.

[viczam]

@dariusj18 how did you downgrade? was it by downloading the previous version?

[dariusj18]

@viczam yes, just downloaded the prior version and reinstalled

[mjbvz]

Please share a minimal example project that demonstrates the issue

[artu-ole]

@mjbvz Do you imply that it somehow functions in 1.60.0 for you? For me and others in this ticket I believe this is the case: 1.60.0 1.59.1

To clarify, Quick Fix import action functions on 1.60.0, it's autocomplete that does not.

[mjbvz]

Please share a minimal example project with steps to reproduce the issue so I can test

[artu-ole]

@mjbvz I hope this helps https://github.com/artu-ole/vscode-132299

[Sheldonfrith]

Sorry @mjbvz, I really don't have time to create an example project. But hopefully this additional information helps:

I'm using latest version of NextJS, with this as my tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": "."
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

This only seems to be an issue in .tsx (React JSX) files. Regular .ts files the import statement is automatically added to the top as expected.

[gportela85]

Also had to downgrade VS Code, in our project, we have a main.ts that does export { ClassFoo } from '../../somefolder/foo';

Before, Auto Import used to also import from somefolder/foo, but now it's importing from main.ts all around my code.

[eglavin]

Same issue visible in image below create react app with typescript Vscode: 1.60 on top Vscode: 1.59.1 on bottom

[IHIutch]

Same here

1.60.1

1.59.1

That said, this is an example with https://github.com/chakra-ui/chakra-ui, other packages are still auto importing in 1.60.1, like https://github.com/react-hook-form/react-hook-form

[mjbvz]

@artu-ole Works for me:

Any extra steps? Have you tested on insiders with extensions disabled?

@IHIutch Please share a minimal example project that demonstrates the issue. Also confirm that whatever package you are trying to import from is listed in your package.json (previously we also included imports for dependencies of dependencies, but TS 4.4 tried to cut these down)

[IHIutch]

Here you go: https://github.com/IHIutch/auto-import-test

I also made a recording: https://user-images.githubusercontent.com/20825047/133536156-6f4e487c-9a36-4708-885f-fcd181fb7fbb.mp4

It does look like the auto import works when you're using the specific package, but in previous VSCode versions, auto importing out of @chakra-ui/react worked.

This is VSCode 1.59.1: https://user-images.githubusercontent.com/20825047/133536439-4b9b0c95-febe-4442-bf0a-e7ee3cbc32a3.mp4

Maybe this is an issue with how components are exported in certain packages, I did comment on a discussion in chakra-ui. https://github.com/chakra-ui/chakra-ui/discussions/4608#discussioncomment-1335644

So I guess Im trying to understand if this is a VSCode bug or a Chakra (and the like) bug. For full transparency, I know nothing about Typescript...

[yudyananda]

Based on chakra-ui/chakra-ui#4608 this behaviour may not only in typescript but also happens in regular javascript.

[lillallol]

for me disabling lit-plugin extension and reloading vscode re enabled auto imports

[artu-ole]

@lillallol Thank you!

@mjbvz Indeed, it's the lit-plugin that was causing the bug for me. I did not anticipate that vscode update would render a plugin incompatible to the point that all auto imports allover the app would break. Since, as already mentioned, it functions with the same plugins in 1.59.0. Hence I did not test without plugins. Nevertheless, my apologies, this is not a bug in vscode per say, at least in my environment. I suspect there might be other plugins causing the same bug for others as well.

[jjspace]

I just wanted to add and confirm that this behavior was also happening for me for normal .js files and does not seem to be exclusive to typescript files.

I can also confirm that disabling lit-plugin on version 1.60+ made auto import work again. However with people above mentioning/showing react and chakra projects I would suspect this is not limited to the lit-plugin extension

[IHIutch]

I'll confirm that I do not have that extension installed

[Artur-]

I used the excellent ”extension bisect” to determine that lit-plugin caused the issue for me. You can probably find your problematic extension the same way

[Artur-]

This is how I can reproduce it

git clone https://github.com/Artur-/vscode-import-problem
cd vscode-import-problem
code .

1. Open both exporter.js and importer.js
2. In importer.js auto complete the import for exportedMethod

With lit-plugin installed and enabled: No import is added With lit-plugin disabled: The import is added as expected

[IHIutch]

No such luck for me. As I mentioned above, auto import isn't completely broken for me. It just isn't working in a specific circumstance. I'm trying to understand if this is unexpected or expected behavior given the recent VSCode update.

Since I neither maintain @chakra-ui/react nor have a good understanding of Typescript and its intricacies, unfortunately, I won't be able to offer much help with debugging in that regard. Though I am happy to offer what information I can provide.

[jjspace]

@IHIutch If you have the time it might be helpful if you can try the extension bisect process @Artur- mentioned. You might be able to find another extension that's breaking it for you and maybe that will help find the core problem quicker?

[mjbvz]

@Artur- @jjspace Please file this issue against the lit-html extension

@IHIutch Please open a separate issue with a minimal repo so we can investigate separately?

@Sheldonfrith Can you check if lit-html was causing this? If not, please share a minimal example with steps to reproduce so we can investigate this

[jjspace]

@mjbvz @Artur- already created one in the lit-plugin's parent repo https://github.com/runem/lit-analyzer/issues/200

[Artur-]

Is this possibly related to getCompletionEntryDetails having an additional parameter in TS 4.4 that is not present at least in 4.2? https://github.com/runem/lit-analyzer/blob/56489d04242b35d692b1db4d0f776f9ca0da19b9/packages/ts-lit-plugin/src/ts-lit-plugin/ts-lit-plugin.ts#L45-L59 seems to cause the issue in lit-plugin

[Sheldonfrith]

@mjbvz Yes it looks like this was caused by lit plugin for me as well. Thank you all! I should have done a thorough test of all my extensions before starting this issue. I would say this issue can be closed now.

[mjbvz]

Ok, I'm going to close this issue as caused by lit plugin

If you are still seeing issue with the plugin/extension disabled, please open a new issue with a minimal example project demonstrating the issue so that we can investigate

[43081j]

@mjbvz lit-plugin hasn't changed in some time, so its pretty clear that whatever was published in 1.60.0 of vscode was capable of breaking extensions which worked in 1.59.x, right?

if we haven't changed our extension and now it has broken, it is vscode's change, not ours. even if it turns out its some behaviour we were relying on that vsc dropped, thats a breaking change nobody announced.

ill look into it but i don't think its sensible to dismiss the issue here. vscode caused this, the extension did not change.

so i don't have to read through a 1,000+ file diff (1.59.x -> 1.60.x), if any maintainers/contributors have any ideas what could've changed that affects imports, please do let me know.

[mjbvz]

@43081j This was caused by change in the internal TypeScript apis that lit-plugin extends, not by a change in VS Code itself. Try looking to see what changed with those apis in TS 4.4

[43081j]

ah awesome, thanks for pointing me in the right direction. will take a look 👍