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 (e7d7e9a, 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. chakra-ui/chakra-ui#4608 (comment)

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 runem/lit-analyzer#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 👍