Intellisense autoimport of React components not working

[F1nnM]

Issue Type: Bug

I created a basic react app with the CRA utility and added another file Test.js:

export default function Test({}) {
    return <>Test</>
}

While Intellisense recognizes this file and offers completion when I type <T somewhere else, it doesn't auto-import it, when selected.

This also applies to installed components like Bootstrap for React or MDBReact. The correct completions are shown, but it doesn't import them.

It used to work, but today it suddenly doesn't work anymore. Neither on new projects nor on old ones, where it definitely did work. I don't recall updating VSCode, but I guess I did that recently, based on the version below. I also updated Node and NPM, should that be important.

VS Code version: Code 1.57.1 (507ce72, 2021-06-17T13:26:56.255Z)
OS version: Linux x64 5.4.0-73-generic snap
Restricted Mode: No

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz (12 x 3900)
GPU Status	2d_canvas: unavailable_software gpu_compositing: disabled_software multiple_raster_threads: enabled_on oop_rasterization: disabled_off opengl: disabled_off rasterization: disabled_software skia_renderer: enabled_on video_decode: disabled_software vulkan: disabled_off webgl: unavailable_software webgl2: unavailable_software
Load (avg)	3, 3, 2
Memory (System)	15.50GB (0.96GB free)
Process Argv	--force-user-env --no-sandbox --unity-launch --no-sandbox --crash-reporter-id 1fc55df9-b43f-42d8-9dfd-4fb61e8710bc
Screen Reader	no
VM	0%
DESKTOP_SESSION	plasma
XDG_CURRENT_DESKTOP	KDE
XDG_SESSION_DESKTOP	KDE
XDG_SESSION_TYPE	x11

Extensions (15)

Extension	Author (truncated)	Version
vscode-css-formatter	aes	1.0.1
markdown-table-prettify	dar	3.4.0
gitlens	eam	11.5.1
vscode-npm-script	eg2	0.3.22
rest-client	hum	0.24.5
latex-workshop	Jam	8.19.2
rainbow-csv	mec	1.8.1
vscode-docker	ms-	1.14.0
python	ms-	2021.6.944021595
vscode-pylance	ms-	2021.6.2
jupyter	ms-	2021.6.999406279
vetur	oct	0.34.1
vscode-scss-formatter	sib	2.2.2
vscode-ltex	val	10.4.0
json	Zai	2.0.2

A/B Experiments

vsliv368cf:30146710
vsreu685:30147344
python383cf:30185419
pythonvspyt602:30300191
vspor879:30202332
vspor708:30202333
vspor363:30204092
pythonvspyt639:30300192
pythontb:30283811
pythonvspyt551cf:30311713
vspre833:30321513
pythonptprofiler:30281270
vshan820:30294714
pythondataviewer:30285071
vscus158:30321503
pythonvsuse255cf:30323309
vscorehov:30309549
vscod805:30301674
binariesv615cf:30323120

[NatanCieplinski]

I'm having the same problem, the correct completion are shown but the autoimport doesn't work.

System info

• Version: 1.57.1
• Commit: 507ce72
• Date: 2021-06-17T13:26:50.042Z
• Electron: 12.0.7
• Chrome: 89.0.4389.128
• Node.js: 14.16.0
• V8: 8.9.255.25-electron.0
• OS: Darwin arm64 20.5.0

[F1nnM]

Very likely related to this: If I import for rexample ReducerAction (I don't know wether it makes sense at this point in the code, I just tried random things), it actually imports it. But like this...

After I press enter:

[a-type]

Same issue here, and sometimes the proper imports don't show up at all - unless I close the intellisense and then Ctrl+Space again to reopen it.

In fact the one I ended up committing (the first suggestion) came from the wrong place - it used to properly default to import items from @material-ui/core, not sub-directory modules, as the first suggestion.

Often when I try to import React components from inside my project source I also get the first suggestion as some kind of 'shadow import' which has the right apparent typings but doesn't add an import line. (update: seems to only happen for stuff not in node_modules).

If it matters, you can see I'm using TypeScript paths to alias directories.

[F1nnM]

Same issue here, and sometimes the proper imports don't show up at all - unless I close the intellisense and then Ctrl+Space again to reopen it.

Can confirm, that's also a issue I'm facing.

However I don't get those "shadow imports". For me it just shows it once, and that doesn't add imports. Also no "Auto-Import" - label shows on the suggestion for me, so I guess the entry does what it's supposed to do (which is nothing), but the Auto-Import entries don't show up.

[risenxxx]

I faced this today.

CleanShot.2021-06-27.at.01.12.17.mp4

[hotfix519]

I'm seeing something like this. But it's only one specific project.

This project is working correctly.

This project is not.

I have NO idea why one would work and one wouldn't. I already spent a good bit of my afternoon trying to figure out what the cause could be w/o much luck. I had been approaching this from a project specific issue, so I was trying things like editing configs, settings, clearing node_modules, lock files, etc. And nothing had an effect. And I can confirm that non JSX exports are importing properly.

Would be glad to provide any more info, or dig deeper if pointed in the right direction.

[vricop]

Same here. This happens to me since last update.

[joshuajung]

This is likely caused by microsoft/TypeScript#44657 and fixed by the related PR microsoft/TypeScript#44724. It is no longer apparent for me in typescript@next, so if you point your VSCode there, you may be fine as well.

[hotfix519]

I just pointed my project to typescript@next and I can confirm that auto-imports are working now. Thanks for the info!

[mjbvz]

Duplicate of microsoft/TypeScript#44657